Jump to content
bnapoli

Navigation bar breaking into 2 lines

Recommended Posts

bnapoli

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

Share this post


Link to post
Share on other sites
Aires

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;
}
}

 

Edited by Aires
forgot some css (see edit history)
  • Like 1

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
bnapoli

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.

Edited by bnapoli (see edit history)

Share this post


Link to post
Share on other sites
bnapoli

This worked. Thank you!

 

Share this post


Link to post
Share on other sites
bnapoli

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?

Share this post


Link to post
Share on other sites
bnapoli

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?

Share this post


Link to post
Share on other sites
Andrew

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

Share this post


Link to post
Share on other sites
bnapoli

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

Share this post


Link to post
Share on other sites
bnapoli

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.

Share this post


Link to post
Share on other sites
Andrew

site is looking good man :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • pehja
      By pehja+
      It would be nice to have an option in the impuls section to only view hamburger menu.  That or let nav pro have that option ad also transparent background. Impuls is a great section. Love it.
    • nadielp
      By nadielp+
      Hi Everyone,
      I am trying to get a single navigation item to center. I am using a scroll menu in the navigation component of Impulse. I would like to have the item in the center of the page but it defaults right. I tried setting the item to center a few different ways and nothing is working. I added {
        display: inline-block;
        position: relative;
        text-align: center;
      }
      but that didn't work...any help would be appreciated. Site is at http://vetpaw.org/new
       
      Thanks!
      Daniel
×