Keeping navigation on one line - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
May 31, 2017 at 6:36 am #801827

nazortho
Participant

Hi there –

I started my topic originally at https://kriesi.at/support/topic/condensing-navigation-on-small-screens/, but it’s been closed out before things got fully sorted, so posting a new question here:

I’m trying to make sure the navigation at nazortho.com never pushes onto two lines. The navigation is a bit wide, so if you reduce the browser size, it goes onto two lines (and looks awful) a bit before it turns into the square mobile navigation drop down. I’d like to make it so that as soon as the navigation drops to the second line, it becomes the mobile square.

I’ve already got it set to do mobile nav on tablets, but there’s still a 100 or 200 pixel disconnect between that width and where the navigation starts looking wrong.

Thanks for your help!

May 31, 2017 at 9:36 pm #802204
Yigit
Keymaster
Hey,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
```
.main_menu {
    padding: 0;
}
```
Also, please see – http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/ and http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

Best regards,
Yigit
June 1, 2017 at 6:44 am #802365

nazortho
Participant

Thank you! That worked. Running it past the client (as it changes the look of the nav a little), but I think we’re probably sorted!

June 1, 2017 at 12:39 pm #802509

Rikard
Keymaster

Hi,

Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

June 2, 2017 at 5:41 pm #803135

nazortho
Participant

Hey –

The client isn’t happy with this solution since it moves the navigation positioning. All we want to do is make sure the mobile box appears as soon as we minimize the screen and start pushing the nav onto that second line.

Thanks in advance for your help.

June 2, 2017 at 6:18 pm #803148
Yigit
Keymaster
Hi!

In that case, we would recommend you to refer to these posts – http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/ and http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/. Currently there is simply no space.

Alternatively, you can add following code to Quick CSS and decrease menu font size at certain screen size
```
@media only screen and (max-width: 1400px) { 
.main_menu ul:first-child > li > a {
    font-size: 13px;
}}
```
Cheers!
Yigit
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.