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

  • Adam Czajczyk

    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

    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

    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

    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

    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

    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?

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.