[Resolved] Adjusting Nav Bar Height (No Merge) best practice | Changing dropdown fonts size

[Krystian]

Hello guys!

I’m testing Split theme and wanted to know what is best practice to reduce Nav Bar height.
I can do it in customizer using

Layout>Primary Nav>Menu Item Height
or
Layout>Header>Header Padding (top,bottom)

I need to adjust both settings at the same time to get the expected lower height. But I can get the same results using different combination of two. For example (made up)
1. Menu Height 40, Padding 0, 0
2. Menu Height 20 Padding 10, 10.
Is there a best practice regarding that? Should Padding have at least some value, or one be always bigger, or something, or it doesn’t matter at all?

Second question, how can I adjust font size of dropdown menu? I’m changing Nav Bar font size with no effect on dropdown menus.

Third, how can I adjust Nav Bar position to look like on GP site? I’d like to align it to right. I’ve deleted logo, separator, and tried different options in Layouts to no avail. Menu stays in the same place, only blue wordpress button “Click to edit” moves.

[David]

Hi there,

1. with the nav inside the header then yes you need to adjust both to change the height.

2. I provide some CSS for that here:

https://generatepress.com/forums/topic/change-submenu-font-size/#post-998952

3. GP uses:

1. Customizer > Layout > Header – Full Width.
2. .. Layout > Primary Navigation – Location: inside header, alignment: right.

[Krystian]

Thank you, CSS works like a charm.

I don’t see any changes in Nav Bar position, no matter what I try.
Float right / float left – no difference, menu stays in the same position just blue “edit” button in customizer moves.
Above/below header (it moves up/down) but then alingment left/center/right does nothing.
Changing Navigation position in Site Hero element to Float Right/Left also doesn’t work (other positions like below header does).
Separator is deleted, so it’s not that.

I’ve checked in other theme (mellow) and everything works there.

[David]

You said originally you were using the Split site ?
If so then in Customizer > Additional CSS – you should see the CSS that the Site imported. If you don’t want the Split header then you can remove everthing apart from the rules beginning with .button

[Krystian]

Yes, it’s Split.
I like the header very much, just want to align the Navigation on the right side like on this GP support site.

Ok, I’ve deleted almost everything – it works – now it can be adjusted, but could you point me to a specific CSS entry that is responsible for that alignment, so I can edit that? I do not want to delete it all, sice I do not even know what it’s doing

[David]

Can you link me to the site ?

[Krystian]

Hello, yes of course.
My site is energiazycia.com
I’ve restored original CSS to site.

I did edit my previous post.
I’ve deleted all the CSS that wasn’t button, and now it works, I can change the alignment.

But could you point me to a specific CSS entry that is responsible for that alignment so I can edit just that? I do not want to delete it all, since I do not even know what it’s doing, and there was stuff regarding mobile headers and such.

It works if you just delete two entries cited below. I’ve tried to change float:none to float:right with no effect.

.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

and

#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

[Tom]

Hi there,

To make it so the header/navigation is aligned normally, try removing this CSS:

.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}

#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}

#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

[Krystian]

Thanks both of you 🙂

[Tom]

No problem 🙂

[Author]

Posts