Topic: navbar links are getting pushed under logo

Tagged: x

Author

Posts
February 17, 2017 at 11:43 am #1375323

bperry420
Participant

Can you please give me the correct “media css code” to make my navbar links switch to the mobile hamburger icon sooner?
When you view the site on a smaller screen the links are pushed under the logo.

Home

WordPress 4.7.2 running X – Child Theme theme
Cornerstone Version 1.3.3

February 17, 2017 at 3:18 pm #1375551

bperry420
Participant

I have attached a screenshot…

February 17, 2017 at 3:24 pm #1375556

bperry420
Participant

sorry, here is a screenshot…

February 17, 2017 at 3:52 pm #1375591
Jade
Moderator
HI there,

Please add this code in the customizer:
```
@media (max-width: 1270px) {
    .x-nav-wrap.desktop {
        display: none;
    }

    .x-btn-navbar {
        display: inline-block;
        float: right;
    }
}
```
Hope this helps.
February 17, 2017 at 6:31 pm #1375700

bperry420
Participant

That worked, but the hamburger icon menu will not open when it’s on a wider screen.
It only drops open when the screen is small. Please help. Thanks

February 17, 2017 at 11:28 pm #1375961
Friech
Moderator
Hi There,

Please update the given CSS code to this:
```
@media (min-width:  980px) and (max-width: 1270px) { 
	.masthead-inline .x-btn-navbar {
	display: block;
    	float: right;
	}
	.x-nav-wrap.mobile.collapse.in {display: block;}
	.x-nav-wrap.desktop {display: none;}
}
```
Hope it helps, Cheers!
February 18, 2017 at 9:28 am #1376270

bperry420
Participant

Thank you so much! That worked. You guys are the best!

February 18, 2017 at 9:38 am #1376276

Thai
Moderator

You’re most welcome 🙂
Author

Posts

<script> jQuery(function($){ $("#no-reply-1375323 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>