How to customize responsive nav so it doesn't drop on 2 line on small screens

4 posts in this topic

So I have an issues that I've been trying to fix. Basically my main navigation is not automatically shrinking into the responsive style on small screens, but instead it's just dropping into 2 lines. Best example for this is looking at the site on an iPad portrait mode or just make the browser window smaller. How do I change the nav width so that at a certain screen width it switches to the drop-down nav. My site is Thank you for you time and hope you can help me with this.


See screenshot.



Share this post

Link to post
Share on other sites

Hi there,


The mobile menu is triggered by the width of the device which is set in the css. To get the mobile menu to display on the ipad in portrait mode I would assume you'll need to use some browser specific css, and adjust the trigger width for the ipad in portrait mode.


There's an example of the css used and the widths here -


You also might find the Browser Specific Css plugin will be able to help you too - docs for plugin -


You can also see examples of how the css is written on this post which someone was adjusting the iphone layout, see Jen's post -

Share this post

Link to post
Share on other sites

Thank you but, I can't seem to be able to fix this. I don't think I need a browser specific css plugin. The nav looks like works on to the mobile version when you reduce the screen to about 700px. So it's already set. I just need to modify that part so it adjust at around 1000px, but can't find where this is. Wish you could be a bit more specific on just how to edit this. Thank you.

Share this post

Link to post
Share on other sites

Hi there, you'll need to edit the css for the navbar so the trigger width is adjusted like below.


For example following the post linked above you'd enter into the css box


@media screen and (max-device-width: 480px)

edit the value of the 480px to the required width you want the trigger to start and follow by your code for the collapsed version of the navbar plus any other amendments you want to include for the mobile display.


Unfortunately there's no inbuilt options for adjusting this type of information built into the framework, these changes will all need to be made with custom code.


If you've not used css inside the framework before, check out which has an overview on the tools we advise using to find the various css selectors that you can use to find make the edits.

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

    • Change hover state color on main navigation
      By helvetik_a
      Hi! I was looking for a solution in the forum...
      I would like to change thepseudoclasses in the submenu.  (hover, active etc...)
      I tried already everything with css, but nothing....maybe there's a need of javascript?
      this is my link:
    • Third Level Into The Navigation
      By annechristine
      Hi there,
      I've a problem with the main navigation:
      The last item has a third level in the navigation, it's diplaying ok but impossible to click on it.
      If I move the third level to the first item of the navigation, it's all right.
      Please, have a look :
      Thank's a lot for yours answers.