Jump to content

Archived

This topic is now archived and is closed to further replies.

festoon

Change responsive trigger width of NavBar

Recommended Posts

festoon    0
festoon

I'm using the section 'NavBar'. Is there anyway to force the nav to switch to mobile format at 900px rather than 767px?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

Yes, what you will need to do is use @media queries. The simplest way for you to get the correct code is for you to open up the style.less file in:

 

wp-content/themes/pagelines/sections/navbar

 

Then find all the @media queries, copy these into your custom CSS and change the min-width from 767px to 1000px. Do not edit the style.less in the navbar folder, as these changes will be replaced when an update is available.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
festoon    0
festoon

Thanks heaps Danny. That worked a treat!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tindel    0
tindel

does this work for fixed nav as well.  want to trigger mobile menu on ipad and phone, but keep "desktop" site on both. (not mobile sitenot getting any change.  johntindel.com

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, yes this method will also work for the fixed nav by editing the @media queries inside the navbar folder you've copied over.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
lexlex88    0
lexlex88

I'm having difficulty resolving this same issue in the latest release of DMS. There is nothing referencing a min-width of 767px.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

In the style.less file change the resPortraitTablet variable, to your preferred width. It is now using one of the PL variables for mobile devices.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×