New to the community? Start here

Spirit Theme Responsive Mode: How to configure custom navigation buttons that work in all views

I'm not sure if this is an UpFront issue or just with the Spirit Theme so here it goes.

The site I'm working on needs a custom navigation. We've built it, it's in and now we can't seem to get the images that make up the navigation buttons to appear uniformly across all views (i.e. standard, large tablet, small tablet and smart phone). For whatever reason, when I change the configuration on say, the large tablet view it also changes the view on the standard screen view for a desktop.

I'm going to attach a couple screen shots so you can see what I'm seeing.

Basically, I need to know can we create a custom view for each mode/view (i.e. standard, large tablet, small tablet and smart phone) or do we have to adjust the navigation on the standard view to fit all other screen views? I have a client that really would like the latter and any help you can give us on this issue would be great!

Support access has been granted for this site, please feel free to take a closer look if you need to.

Thanks
Martiel

  • Martiel
    • The Incredible Code Injector

    This second view is showing the responsive mode for the large tablet. You can see that both are showing up in both views even though we have tried deleting one or the other.

    If you need other images, please don't hesitate to ask. Also support access is granted if you need to check it out closer.

  • Adam Czajczyk
    • Support Gorilla

    Hey Martiel,

    I hope you're well today and thank you for your question!

    I took a look at your site, both front- and back-end and I noticed that you're menu is a bit unconventional as it's not a standard WordPress menu. Of course this doesn't mean that it can't be responsive.

    That said, I've tested it using Firefox "responsive" view tool and also double-checked it with Upfront's editor and I think I need to ask you for more screenshot. Could you please create a "mockup"/"sketch" on how should it look like for all available screens (desktop, big tablet, tablet, mobile)? I must admit I'm not sure "what is what" here, I hope you understand my point :slight_smile:

    Thanks!
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Martiel!

    Thanks for the video. I've already downloaded it to my computer so please feel free to remove it from YouTube whenever it suits you :slight_smile:

    I also apologize for the delay on my side. I've been a bit overloaded with support tickets recently. Hopefully, what I've got for you will help you go further with your design.

    I took a menu code from your site and changed it a bit and then added some CSS rules. To apply it to your site please add a single "code" element where you wish your menu to be placed and make it full-width of the site.

    The code to be placed there is below:

    <div class=&quot;main-lip-menu&quot;>

<a class=&quot;lip-menu-item-1&quot; href=&quot;http://www.teachinglipsology.com/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;HOME&quot; height=&quot;80&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/homebutton.jpg&quot; />
</a>
<a class=&quot;lip-menu-item-2&quot;  href=&quot;http://www.teachinglipsology.com/contactus/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;CONTACT ARIANA&quot; height=&quot;80&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/ContactArianaButton.jpg&quot; /></a>
<a class=&quot;lip-menu-item-3&quot;  href=&quot;http://www.teachinglipsology.com/what&quot; target=&quot;_blank&quot;>
	<img alt=&quot;WHAT IS LIPSOLOGY&quot; height=&quot;80&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/WhatIsLipsologyButton.jpg&quot; />
</a>
<a class=&quot;lip-menu-item-4&quot;  href=&quot;http://www.teachinglipsology.com/kissing-cards/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;KISSING CARDS&quot; height=&quot;80&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/KissingCardsButton1.jpg&quot; />
</a>
<a  class=&quot;lip-menu-item-5&quot; href=&quot;http://www.teachinglipsology.com/private-readings-parties/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;PRIVATE READINGS AND PARTIES&quot; height=&quot;80&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/PrivateReadingsParties2.jpg&quot; />
</a>
<div class=&quot;lip-menu-separator&quot;></div>
<a class=&quot;lip-menu-item-6&quot;  href=&quot;http://www.teachinglipsology.com/testimonials/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;TESTIMONIALS&quot; height=&quot;70&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/TestimonialsButton.jpg&quot; />
</a>
<a class=&quot;lip-menu-item-7&quot;  href=&quot;http://www.teachinglipsology.com/press-kit/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;LINKS AND PRESS KITS&quot; height=&quot;85&quot; me=&quot;&quot; src=&quot; http://www.teachinglipsology.com/wp-content/uploads/2015/05/Links-Press-Kits.gif&quot;  />
</a>
<a class=&quot;lip-menu-item-8&quot;  href=&quot;http://www.teachinglipsology.com/learn-lipsology/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;LEARN LIPSOLOGY&quot; height=&quot;85&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/LearnLipsologyButton1.jpg&quot;/>
</a>
<a class=&quot;lip-menu-item-9&quot;  href=&quot;http://www.teachinglipsology.com/gallery/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;GALLERY&quot; height=&quot;85&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/GalleryButton.jpg&quot; />
</a>
<a class=&quot;lip-menu-item-10&quot;  href=&quot;http://www.teachinglipsology.com/in-the-news/&quot; target=&quot;_blank&quot;>
	<img alt=&quot;IN THE NEWS&quot; height=&quot;85&quot; me=&quot;&quot; src=&quot;http://www.teachinglipsology.com/wp-content/uploads/2015/07/InTheNewsButton.jpg&quot; />
</a>

</div>

    This alone should give you pretty much the same menu as you already have but evenly spread across page width (for "desktop" view) and centered.

    Next step would be to add some custom CSS code. While still in "Upfront" mode (but NOT responsive) please switch to "Theme settings" inside left Upfront panel and click the "add custom css rules" link.

    This will bring a CSS code editor at the bottom of the screen. It's most likely filled with the code already, so just scroll this code all the way down and after the last line add this:

    .main-lip-menu {width:100%;margin:0 auto;text-align:center;}
.main-lip-menu a {margin-right:5px;}
.main-lip-menu a:last-of-type {margin-right:0;}
.lip-menu-separator {display:none;}

@media screen and (max-width:810px) {
	.lip-menu-separator {width:100%;height:0;padding:5px;display:block;clear:both;
}
@media screen and (max-width:312px) {
	.main-lip-menu img {height:40px!important;}
}

    As you've probably noticed already I totally ignored Upfront's "responsive" mode. That's because your menu is not typical WordPress menu and as such should be treated otherwise.

    What this CSS code does is:

    1. First for lines center it on the page (for all views)

    2. "@media screen and (max-width:810px) {" enables display of a full-width, no-height (therefore invisible) element that "breaks" menu into two rows; we can call it a "line break" :slight_smile:

    3. Next "@media" element additionally makes images a bit smaller so two lines menu still fits the screen.

    Give it a try please and let me know of the result. I've tested it on my setup but it's possible that some further customization will be required as I'm not able to fully replicate your site on my end.

    Cheers,
    Adam

  • Martiel
    • The Incredible Code Injector

    Hi Adam,

    I understand everything you are saying here and this is completely doable. Thank you for all the help. So the issue now is that when I go to put in a "code" element, it sets it as a region that cannot be edited. I'm not sure what it is could be a browser issue (unlikely since I have tried it on 3 different ones now), but maybe it needs an update?

    I granted support access if you need to take a closer look. I'm also attaching a screen shot so you can see what I mean... I've been using UpFront since January and I have never seen this before.

    Suggestions?

  • Predrag Dubajic
    • Support

    Hey @Martiel,

    Thanks for the video and for granting support access, I checked your site and this is certainly not something that should happen, there are number of console errors on your site that are appearing after activating Upfront editor.

    And after trying to add Code element one more error (huge one) shows up.
    I was unable to replicate this on my installation as the Upfront works fine on my install, I'll ping developer @Jack Kitterhing to see if he can give us some more info regarding this.

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hey Martiel,

    I hope you're well! I've tested this on my install just to make sure and I can confirm what Predrag said.

    That said, @Jack Kitterhing is already notified about it and I'm sure he'll be able to give us a tip here. Please note though that it may take a bit longer for him to respond as he's dealing with a lot of complex issues. I'm sure though he'll get back to us as soon as possible.

    Thanks for your patience!
    Cheers,
    Adam

  • Martiel
    • The Incredible Code Injector

    Thanks for the update. I really appreciate it. I have a client that is a bit on the grumpy side because of this, not that we have any control over it. :disappointed: so I really do appreciate you letting me know what's happening. I'll check in a couple days to see if anything has been posted on this issue.

  • Predrag Dubajic
    • Support

    Hi @Martiel,

    While we wait for Jack could you please update Upfront and Spirit to latest version as there are number of fixes included.
    Please make a full backup before the update just to stay on safe side.

    Let us know if there are any improvements after that update, and if you could keep support access open it would be great :slight_smile:

    Best regards,
    Predrag

  • Martiel
    • The Incredible Code Injector

    hi @Predrag Dubajic

    One more related question....

    When we did the update the navigation menus (standard ones, not our funky photo one) has changed from having a transparent background and purple colored text to white text on a charcoal background.

    I was looking at CSS rules but what I'm trying isn't working, can you take a look or would you like me to open a new ticket on this issue?

  • Jack Kitterhing
    • Code Norris

    Hi there @Martiel,

    Hope you're well today! Glad to see that the code element issue is now fixed.

    With regards to the navigation menu css issue, are you referring to the one in the footer?

    Could you re-grant support access please and I'd be happy to take a look at that for you. :slight_smile:

    Thanks!

    Kind Regards
    Jack.

  • Martiel
    • The Incredible Code Injector

    Hi @Jack Kitterhing

    Support access has been granted. Yes, I'm talking about the footer. I provided a screen shot of what the navigation menus looked like before the update and now what they look like after. I'm just trying to revert them so the font, color and background that we used to have prior to the update.

    Thanks for you help!

  • Adam Czajczyk
    • Support Gorilla

    Hello Martiel!

    I'm sorry but I keep getting an "Invalid token" error while trying to access your dashboard. This happens sometimes unfortunately, luckily there's an easy fix for this. That said, could you please re-grant/extend a support access again? I apologize for the inconvenience!

    Thanks,
    Adam

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.