[Resolved] Nav bar wrapping with social icons pushed right

[Mark]

Hi Tom, thanks again for helping with the last issue.

I’ve still got the site up at http://107.170.67.198.

The issue that I’m having now is that I followed some advice from this forum to add social icons to the right side of the menu. The issue is that now it doesn’t wrap to the responsive mode’s properly, waiting till the left side content is pushed before properly transitioning. Any ideas? Thanks again for the help!

[Mark]

I think I have a working fix for now, I found it in another thread. I want to think there is a better way to do this, but if this is the only way then it works for me.

@media (max-width: 1000px) {
	.menu-toggle,
	.main-navigation.toggled .main-nav > ul {
		display: block;
	}
	
	.main-navigation ul li.sfHover > ul {
		display: none;
	}
	
	button.menu-toggle {
		background-color: transparent;
		width: 100%;
		border: 0;
	}
	
	button.menu-toggle:hover,
	button.menu-toggle:active,
	button.menu-toggle:focus {
		background-color: transparent;
		border: 0;
		outline: 0;
	}
	
	.sub-menu.toggled-on,
	.children.toggled-on {
		display: block !important;
		opacity: 1 !important;
	}
	
	.dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.sfHover > a .dropdown-menu-toggle:before {
		content: "\f106" !important;
	}

	.main-navigation ul {
		display: none;
	}
	
	.nav-float-right .main-navigation,
	.nav-float-left .main-navigation {
		float: none;
		margin-bottom:20px;
	}
	
	.navigation-search {
		bottom: auto;
		top: 0;
	}
	
	.mobile-bar-items {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 21;
		list-style-type: none;
	}
	
	.mobile-bar-items a {
		display: inline-block;
	}
	
	.main-navigation .menu li.search-item {
		display: none !important;
	}
	
	li.search-item a {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.menu-toggle {
		text-align: center;
	}
	
	.nav-search-enabled .main-navigation .menu-toggle {
		text-align: left;
	}
	
	.main-nav .sf-menu > li {
		float: none;
		clear: both;
	}
	
	.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li, 
	.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li, 
	.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li, 
	.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
		display: block;
		margin: 0;
		text-align: left;
	}
	
	.main-navigation .main-nav ul ul {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.menu-item-has-children .dropdown-menu-toggle {
		float: right;
	}
	
	.main-navigation {
		text-align:left;
	}
	
	.navigation-search,
	.navigation-search input {
		width: 100%;
		max-width: 100%;
	}
}

[Mark]

Yeah, it works fine until you scroll down, but then the pull down menu is broken. See the screen shot for what I mean.

[Tom]

Have you tried giving the social icons a class of: menu-item-float-right

That, instead of your social_icon class should work a lot better.

Let me know 🙂

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

[Mark]

I cleared the other fix I found and just applied menu-item-float-right and while it did the function of the other class, I still have the issue of it wrapping to a new line.

Here is what it looks like just before it switches to a mobile format:

[Tom]

Ah, one thing you can try is reducing the font size and left/right padding once you hit that width.

For example (taken from this site):

@media (max-width: 880px) and (min-width: 769px) {
    .main-navigation ul li a {
        padding: 0 10px!important;
        font-size: 14px;
    }
}

Replace 880px with whatever width the wrapping begins at, and it should help 🙂

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

[Mark]

Ok, that should work fine, thanks! I just wasn’t sure if there was a way to have it not be hard coded in.

Thanks for the help!

[Tom]

You’re welcome 🙂

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

[Author]

Posts