Shorten main navi

[KEvin]

Hi,

New question: How can I shorten the main navigation block?
It is already contained but I want it shorter than the contained option.
Is it possible?

[Chad Biggs]

This will change the height.
.main-navigation {
height: 20px;
}

[Tom]

Do you mean shorter length-wise?

Where do you have it positioned?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[KEvin]

Yea length. Not height.
Main navi is above the page header, so at the top of the website.

[Tom]

Hmm, maybe something like this would work..

First, we’ll remove the background color from the navigation bar

.main-navigation {
      background: transparent;
}

Then, we’ll add your background color to the inner element, and tell it to float so it doesn’t go full width:

.main-navigation .inside-navigation {
      background:#222;
      float: left;
}

Let me know if that does what you’re looking for.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[KEvin]

The main navi is shorter now yes, but it is on the left. Because of the float ofcourse. And my navi has to be in the center.
I tried float:center but that didn’t work.
Do you know how to set main navi in the center?

[Tom]

Hmm, maybe try this?

.main-navigation {
      background: transparent;
      text-align: center;
}

.main-navigation .inside-navigation {
      background:#222;
      display: inline-block;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[KEvin]

This works! Thanks again Tom!!

[KEvin]

But… There is a small problem. I did this and it worked, but there is a very small gap between page header and main navi now.

I have already this code in my stylesheet:

.separate-containers .page-header-image, .separate-containers .page-header-content, .separate-containers .page-header-image-single, .separate-containers .page-header-content-single {
      margin-top: 0;

How to remove this little space?

[Tom]

Can you link me to the site?

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[KEvin]

Never mind. I like the longer version of the main navi.
Thanks for your help.

[Author]

Posts