Jump to content


Photo
- - - - -

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

main navigation

  • Please log in to reply
3 replies to this topic

#1 cj94111

cj94111

    Newbie

  • Members

  • 5 posts
  • Country: Country Flag

Posted 17 April 2013 - 08:27 PM

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 

Please Login or Register to see this Hidden Content

. Thank you for you time and hope you can help me with this.

 

See screenshot.

 

Attached Files



#2 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 April 2013 - 08:49 PM

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 -

Please Login or Register to see this Hidden Content

 

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

Please Login or Register to see this Hidden Content

docs for plugin -

Please Login or Register to see this Hidden Content

 

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 -

Please Login or Register to see this Hidden Content



#3 cj94111

cj94111

    Newbie

  • Members

  • 5 posts
  • Country: Country Flag

Posted 18 April 2013 - 09:37 PM

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.



#4 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 April 2013 - 12:33 AM

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

Please Login or Register to see this Hidden Content

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.







Also tagged with one or more of these keywords: main navigation