Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Nav bar wrapping with social icons pushed right

Home Forums Support [Resolved] Nav bar wrapping with social icons pushed right

Home Forums Support Nav bar wrapping with social icons pushed right

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #204954
    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!

    #204991
    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%;
    	}
    }
    #204992
    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.

    Screenshot

    #205011
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #205049
    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:

    just before mobile format

    #205107
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #206791
    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!

    #206876
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.