Archived

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

  • 0

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


Question

Posted · Report post

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 experts.allbusiness.com. Thank you for you time and hope you can help me with this.

 

See screenshot.

 

post-42954-0-68455300-1366230313_thumb.p

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

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

Posted · Report post

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 http://support.pagelines.me/docs/customization/custom-css/ 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

Posted · Report post

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 - http://css-tricks.com/snippets/css/ipad-specific-css/

 

You also might find the Browser Specific Css plugin will be able to help you too - http://www.pagelines.com/store/plugins/browser-css/ docs for plugin - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

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 - http://www.pagelines.com/forum/topic/15692-font-size-different-when-viewed-on-mobile-devices-ie-iphone/

Share this post


Link to post
Share on other sites