Navigation bar breaking into 2 lines

[bnapoli+ 0]

http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks

[Aires 265]

Hi @bnapoli,

Give this a try 

@media (max-width: 1300px){
.pl-sn-navpro .nav-icons li a.nav-mob-toggle {
    display: block!important;
}
  .pl-sn-navpro .navpro-menu {
    display: none;
}
  .pl-sn-navpro ul.navpro-mob-menu {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
}
}

 

[bnapoli+ 0]

For some reason, this change only reflects and shows properly when I am logged into the WP admin and looking at the site. When I check on another browser or from the perspective of somebody *not logged in* - the change does not affect anything and it has the same appearance as before. Please help, thanks.

[bnapoli+ 0]

This worked. Thank you!

 

[bnapoli+ 0]

Due to the number of items on the navigation bar, we need the nav bar to stretch to accommodate the overflow of nav items. How do we enable that?

[bnapoli+ 0]

Here is a more formal question: When there are lots of menu items in the NavPro section, when the browser window shrinks, the menu items overflow out of the NavPro section and hang into the sections below. Is this a bug? How can we fix this with CSS?

[Andrew 207]

I'll have ray take a look at cleaning up the formatting, any way you can post the desired result/look for us? 

[bnapoli+ 0]

Yes of course. In fact, I have my dev working on the CSS now also.

[bnapoli+ 0]

I had my PHP guy fix the issue with the double nav. You can see it working here: http://731.34b.myftpupload.com/

We also created a plugin for putting a phone number in the navigation bar.

[Andrew 207]

site is looking good man