Extend Navigation Bar (with CSS?!)

Hi @all,
this is my first post and I really hope I just overlooked something.

website: https://christinakapl.at

So it seems like the navigation bar is bound to be in the center (which is fine by me) and it intended to place a button on the right which I removed as I don't need it there. However on my 15" monitor the last item of the menu is displayed in a second row, which doesn't look right. I understand that it needs to create a second line at some point but I think 4 items should fit into a menu bar....

The space is big enough, so I wouldn't find the need to change the font size, also because  I think it would change it site wide if changed in the style settings. Is there a way to just extend the field for the navigation bar? Does it need to be extended via CSS?

Thankful for any ideas on that.

1 hour ago, christina_ckg said:

So it seems like the navigation bar is bound to be in the center (which is fine by me). However on my 15" monitor the last item of the menu is displayed in a second row, which doesn't look right.

Hi @christina_ckg 👋

You can have the navigation in the center or you can choose to have it on the left or right. You can choose by clicking the EDIT DESIGN button that's shown in your screenshot.

By default, the desktop header is divided into thirds. The site title/logo is assigned 33%, the navigation is assigned 34% and the actions area on the right is assigned 33%:

There isn't a style setting that allows you to assign more space to the desktop navigation, but you can achieve this with some Custom CSS:

For example:

.header-layout-nav-center .header-title {
    width: 20%;
    flex: 1 1 20%
}

.header-layout-nav-center .header-nav {
    width: 60%;
    flex: 1 0 60%;
}

.header-layout-nav-center .header-actions {
    width: 20%
}

You can adjust to meet your needs. 

Did this help? Please give feedback by clicking an icon below  ⬇️

11 hours ago, paul2009 said:

 

.header-layout-nav-center .header-title {
    width: 20%;
    flex: 1 1 20%
}

.header-layout-nav-center .header-nav {
    width: 60%;
    flex: 1 0 60%;
}

.header-layout-nav-center .header-actions {
    width: 20%
}

 

 

Could you help me with this code adjusted to the header option with site title in the middle and navigation to the right?