[Resolved] Dynamically reduce nav text size, full-width hamburger items, and nav alignment

[Ethan]

First, I love the GeneratePress product, and I love how customizable it is! I have browsed many support threads here and have pieced together some CSS to have my navigation perform (almost) how I want, but not exactly. I am hoping you can help me.

My ultimate goal is to have an upper right navigation menu with text items that stay on one line at all times, until it changes to the hamburger menu. I do not want the navigation menu to ever wrap to a second line or ever drop below the logo. When the hamburger menu engages, I would like the menu items to be full width (same as mobile behavior).

Can you please help me with following:

1. Using the top left logo and the float right navigation, how can I make it dynamically reduce the text size of the navigation menu items as the browser width narrows?

2. At some point (X pixels), I have the navigation change to hamburger menu, which works. But how do I make the hamburger menu items full width (same as mobile), as right now they are just contained to a small box?

3. It seems the top left logo and float right navigation holder are aligned with each other at the top. How can I align the bottom of the logo image and the bottom of the navigation holder with each other (at the bottom)?

4. Currently it seems the navigation menu text is vertically aligned in the center of the float right navigation holder. How can I control the vertical alignment of the menu text within the navigation holder (specifically bottom align)?

This is the CSS I have right now, which accomplishes most of what I am looking for, except for my questions above.

@media (max-width: 1120px) {
	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items,
	.sidebar-nav-mobile:not(#sticky-placeholder) {
		display: block;
	}

	.main-navigation ul,
	.gen-sidebar-nav {
		display: none;
	}

	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
	.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.site-logo {
    margin-right: auto;
}

}

MANY thanks for the help!

GeneratePress v2.2.2
GP Premium v1.7.7

[Tom]

Hi there,

1. It isn’t possible as far as I know to dynamically reduce the text automatically. You’d need to write media queries for specific widths to decrease the font size.

2. To have the mobile menu take up the whole area, it would be better to use our Mobile Header feature: https://docs.generatepress.com/article/mobile-header/

Then you can initiate it at your desired width with this CSS: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540

3. You can align them to the bottom of the header like this:

.inside-header {
    display: flex;
    align-items: flex-end;
}

#site-navigation {
    margin-left: auto;
}

You might need to run that code through this tool, depending on your needed browser compatibility: https://autoprefixer.github.io/

4. Not too sure what you mean here. Can you explain a bit more?

[Ethan]

Thanks so much for the response.

RE: 1. I saw this menu text size behavior here: https://www.playday.cz/work/en/ (found this website via this support forum so I figured they are probably using GeneratePress).

RE: 2. I had tried this before (initialize Mobile Header feature at desired width), but when I use that CSS, it does indeed create the mobile header at the specified width, but the menu is blank (no items appear) on both desktop (below the specified width) and on mobile. Without that CSS, the mobile header works normally (with correct menu items) on mobile.

RE: 3. This worked great, thank you!

RE: 4. Here is a screenshot: https://postimg.cc/0zRpPPbC I’ve just selected the logo and menu to show where the items are. (You can see how the top left logo and float right navigation holder are aligned with each other at the bottom now, thanks to #3!) I’d like to know how to vertically align the text of the menu items (About, Events, etc.) within the highlighted area around each word (this height is determined by Layout –> Primary Navigation –> Menu Item Height). Right now the text is vertically aligned to the middle of that set height. Is it possible to top- or bottom-vertically align the text within that space?

[Tom]

1. They’re using the media query method I mentioned.

For example:

@media (max-width: 1200px) {
    .main-navigation a {
        font-size: 15px;
    }
}

@media (max-width: 1000px) {
    .main-navigation a {
        font-size: 13px;
    }
}

2. That’s strange – definitely shouldn’t happen. I’d need to see it to know what’s going wrong.

4. Something like this might help:

.main-navigation .main-nav ul li a {
    line-height: normal;
    padding-top: 40px;
    padding-bottom: 5px;
}

[Ethan]

Before I go messing around with it some more: the site isn’t live yet, but I can provide you with a Subscriber login to view it, if that would work to troubleshoot #2? How should I get that info to you?

[David]

Hi there,

you can provide a login via the Account Issue form here:

https://generatepress.com/contact/

Please add the URL of this topic to the form so we can track.

[Ethan]

Sent!

[Tom]

Can you try this instead?:

@media( max-width: 1024px ) {
	.site-header,
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}

	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}

        #mobile-header .main-nav > ul {
            display: none;
        }

        #mobile-header.toggled .main-nav > ul,
        #mobile-header .menu-toggle,
        #mobile-header .mobile-bar-items {
            display: block;
        }
}

[Ethan]

All of these issues are now resolved. Thank you so much for your help! It is greatly appreciated!

[Tom]

You’re welcome! 🙂

[Author]

Posts