Jump to content


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


How do I set the breaking point for Hero Nav?

Recommended Posts


Hi Evan, 


Great work on the section! It's been a life saver for me. Just had a quick question, was wondering if it was possible to set Hero Nav to show the mobile menu at a larger resolution. 


Currently it seems to break into the mobile menu at around 600px. Can this number be change to something larger. 

I'm attaching a screenshot so you can see what I'm talking about. You see how the menu basically slides underneath the logo and some items get hidden? Trying to avoid that. Or you could tell me how to make the logo responsive :)



Share this post

Link to post
Share on other sites

Hey chan08,


That's an interesting idea.  The breakpoint is currently set to use the @resPortraitTablet less variable which is set to 767px by default.  There is no option at the moment to change this, but perhaps I'll add it.  If you wanted to change this value, you could do so by copying the core framework's variables.less file into a directory in your child theme named 'less' (filename must be the same).  You could then change the value of that variable to something higher, but it may effect other things as well in a way that may not be practical.  I'm not really sure.


Another thing to keep in mind is that the media queries for it only kick in when the site is in some responsive mode (not fixed width), but it looks like you're using one of those.


Let me know how that works for you!

Share this post

Link to post
Share on other sites

Hi evan,


Is this something you still thinking about adding into the features of DMS? I really feel it would be helpful due to menu lengths with different sites. Please let me know about any other ideas you might have to make this work. Currently markheroldwines.com is in need it, something to switch to mobile around 1280px. Thanks!

Share this post

Link to post
Share on other sites



This feature has been added since 1.2.0.  You will find it at the bottom of Hero Nav's global options (under Site Options).  It's called "Mobile Break".


There, you can specify the width at which Hero Nav's mobile styles should take over.  You can specify either a pixel width (such as 768px or 768), or a less variable (eg @resLargeDesktop).

Share this post

Link to post
Share on other sites

  • Similar Content

    • vikzee
      By vikzee+
      Hero Nav 1.3
      Wordpress 4.2.2
      I just downloaded the latest version of Hero Nav from my Pagelines account but when I try to upload it to the plugins page it gives me this error:
      The package could not be installed. No valid plugins were found.
      Plugin install failed.
      So I unzipped the package and find that all it contains is a README file.
      Can you send me the latest version (vikzee (@[email protected]) yahoo.co.uk) in it's entirety or re-load it to the Pagelines site so people who've paid for it can get the latest version?
    • AppLEaDaY
      By AppLEaDaY
      I did not personally install what I'm trying to fix. I'm working on a preexisting installation of WordPress and Pagelines.
      But when I arrived the problem was already there: just upon posts displaying in the hero nav main menu I get a "Home" link not working,
      due to a anchor completely missing the href attribute.
      I made some tests and I noticed what follows.
      The same problem occurs with every plain link I add that hero menu (not with pages), I mean with links showed as CUSTOM Curiously enough I found in a sublevel a link of that kind, it has somehow back in the past inserted by someone else, no me: it works just like it is supposed to do No problem of that kind in a fixed navigation bar (I tried to enable it) I underscore the mentioned problem occurs only when displaying posts, not with pages.
      Any clues? Since I'm afraid it may take a too long time to fix this specific problem, I also ask: could you possibly point to what I am supposed to read in order to do without the hero nav bar and use some other navigation bar in the same place of the template?
      Thanks in advance
    • limelight
      By limelight+
      Hello, I'm having a strange issue with the background of my Hero Nav drop-down being "see through". Can anyone direct me on how to make this solid black instead??  Thank you! 
      Site URL: http://multicolores.org/ And there is a drop-down menu when you hover over 'About'.
    • ScribbleGD
      By ScribbleGD+
      Hi there,
      Whenever I make changes to the formatting options in the Hero Nav section of Site Settings such as font base colour it doesn't appear to change the look of my nav bar,
      Any reason as to why this is happening? Screenshot attached.
      URL - staging.scribblegraphicdesign.com.au
    • jmad
      By jmad
      I'd like to be able to add a logo to HeroNav.  Particularly on mobile so the icon would be either left or right and the logo on the other.  
      I added a logo just as a menu item but this didn't work perfectly.