- This topic has 10 replies, 3 voices, and was last updated 7 years, 8 months ago by
KEvin.
-
AuthorPosts
-
October 14, 2014 at 7:50 am #39120
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?October 14, 2014 at 9:43 am #39122Chad Biggs
This will change the height.
.main-navigation {
height: 20px;
}October 14, 2014 at 10:01 am #39131Tom
Lead DeveloperLead DeveloperDo 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-developmentOctober 14, 2014 at 11:31 pm #39210KEvin
Yea length. Not height.
Main navi is above the page header, so at the top of the website.October 15, 2014 at 2:41 pm #39396Tom
Lead DeveloperLead DeveloperHmm, 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-developmentOctober 16, 2014 at 4:00 am #39435KEvin
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?October 16, 2014 at 12:09 pm #39599Tom
Lead DeveloperLead DeveloperHmm, 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-developmentOctober 22, 2014 at 5:30 am #40872KEvin
This works! Thanks again Tom!!
October 23, 2014 at 12:40 am #41113KEvin
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?
October 23, 2014 at 12:57 pm #41280Tom
Lead DeveloperLead DeveloperCan 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-developmentOctober 31, 2014 at 2:10 am #42988KEvin
Never mind. I like the longer version of the main navi.
Thanks for your help. -
AuthorPosts
- You must be logged in to reply to this topic.