[Resolved] Floating navbar problem

[Adrian Cojocariu]

Hey, my logo is aligned to the left, it’s about 20% in width of my screen.

I want the navmenu floating right ( why no option for left btw ).

The problem comes on a tablet wide view. ( or zoom on my PC at 915px wide )

1. At the 915 break point, the navmenu and header image stack on over another, leaving menu in right and image under in left, with two big gaps, one top left and one bottom right.

2.The nav menu stacks above the header, I want it below.

2 wouldn’t really be a problem, although I prefer it below when the mobile menu comes out, but … can I use the @media to get them both centered at around max-width: 915px ? So that it won’t look weird on tablets ?

I tried playing with @media and did a float:left importan but it would mess up the mobile menu.

[Tom]

Hi Adrian,

Can you possibly link me to the site so I can see what’s going on? I should be able to provide some CSS for you 🙂

[Adrian Cojocariu]

Meh… I wouldn’t really share this site, so I did something similar on my test domain.

This is the test site

You can see that on a desktop view 15″ it looks ok.

http://quirktools.com/screenfly/#u=http%3A//methodseeker.com/&w=1366&h=768&a=1

But when you switch to tablet horizontal view, it stacks awkward.

http://quirktools.com/screenfly/#u=http%3A//methodseeker.com/&w=853&h=533&a=24

Once again, I want the menu to stack under the header image, and I’d like to get them both centered if possible ?

Thanks !

[Tom]

You can use javascript to move it below the header at a certain breakpoint:

Insert this into the wp_footer hook in GP Hooks:

<script type="text/javascript">
	jQuery(window).load(function($) {
		var widthTimer, breakpoint;
		breakpoint = jQuery( window ).width();
			
		function generateMoveNav() {
			if ( breakpoint < 915 ) {
				jQuery('.main-navigation').insertAfter('.site-header');
			} else {
				jQuery('.main-navigation').prependTo('.inside-header');
			}
		}
			
		if ( breakpoint < 915 ) {
			generateMoveNav();
		}
			
		jQuery(window).resize(function() {
			clearTimeout(widthTimer);
			widthTimer = setTimeout(generateMoveNav, 100);
		});
	});
</script>

Then use this CSS to remove the float:

@media (max-width:915px) {
      .nav-float-right .main-navigation {
            float: none;
      }
}

[Adrian Cojocariu]

Nah, the script loads pretty slows, the servers aren’t the best, and it also messes up if someone zooms on PC, because it won’t return to it’s initial state when you zoom out.

Thx for coding it though, hard work.

I kinda came up with something in CSS, like this.


@media (max-width:915px) {
.nav-float-right .main-navigation {
float: none;
margin-bottom: 20px;
}
.site-header {
text-align:center !important;
}
}


But … in the customizer, I have the option to select if the navmenu is Above Header, Below Header, or Floating Right.

Can you come up with some CSS @media 915px so that I transform it to Below Header ?

This way it will go below the header, the header image will be centered, and the navmenu centered as well. ?

[Adrian Cojocariu]

Ok I figured it out some way in CSS.


@media (max-width:915px) {

#site-navigation {
max-width:550px;
}

.nav-float-right .main-navigation {
float:none;
margin-bottom: 20px;
margin-right:auto;
margin-left:auto;
}

.site-header {
text-align:center !important;
}
}


Although, the problem is that the menu when floating: none has the right margin infinite. I fixed this by adding max width but instead I want to end the margin of the floating: none; navbar where the last navmenu item is.

I represented in this image, take a look.

http://s1.postimg.org/x0uyrb0ta/make_it_end.jpg

If you think this is the best choice, I’ll keep it 🙂

Thx

[Tom]

Hmm I would have to see the actual site to play around with the CSS – hard to know what’s going on without seeing the code.

Can you update your test site above possibly?

[Adrian Cojocariu]

Ok, did a fresh install on

TestSite

It’s basically the same.

You can zoom in to see the effect in action.

This is the CSS

/* Enter Your Custom CSS Here */
.afterheader {
  border-style:solid;
  border-color:#020202;
  border-width:10px;
}

.main-navigation {
  margin-top:15px;
}

@media (max-width:915px) {

.main-navigation {
  max-width:540px;
}

.nav-float-right  .main-navigation {
  float:none;
  margin-bottom: 20px;
  margin-right:auto;
  margin-left:auto;
}

.site-header {
  text-align:center !important;
}
}

@media (min-width:769px) {
.main-navigation, .main-navigation ul ul {
   background: transparent;
}

.main-navigation .menu > li {
   margin-right: 5px;
   background-color:#000000;
}

.main-navigation .menu > li:last-child {
            margin-right: 0;
      }
}

So basically I’m satisfied …

Instead of reading further, maybe this is possible. I want the navigation menu under the header for tablet and mobile.

At the 915px and below break point, can’t I simply change the navigation menu from floating right to below the header through CSS ?

This would basically fix everything I guess, it will stay centered, and it will be below the header, just as I want it.

If not, then maybe just make it stack under the header, but without the script, because it loads it slow and it seems it bugs out.

Regarding my current CSS, if nothing above is possible …

I want to use something else instead of :

.main-navigation {
  max-width:540px;
}

Something like make the margin/padding of the navmenu end exactly where the last menu item in the right ends.

|starts here|MenuItem MenuItem MenuItem MenuItem|ends here|

Wutever I think u get the idea.

It already starts there in the left, but ends a lot further in the right.

Basically the margin left and right : auto works, it centers the navmenu, but because the navmenu margin in the right is bigger ( there is whitespace between the last nav item and the end of the navmenu ) it looks like it’s “to the left, to the left”.

I fixed this by approximating max-width, can I instead limit the margin/padding ?

Also, this only works with fluid navigation layout in the customizer.

[Tom]

Looks good!

It’s not possible to move HTML elements using CSS I’m afraid.

The script I gave you is designed to wait a half second before functioning, this is to because it loops through the function as you resize your browser. Without the pause, the script will run far too much and cause lag.

I personally would use the script – how often do your users resize their browser window up and down like you are when you’re testing? I’m guessing not all that often. They probably just load the website and see it at whatever size their screen is.

As for max-width, I would use this instead:

.nav-float-right .main-navigation {
      display: inline-block;
}

[Adrian Cojocariu]

Baaah dude you’re right, it’s nothing that important I just tried to figure out the CSS so I can learn to master the theme 😀

I’ll just leave it like that

I already tried inline-block but it messes up the mobile menu.

U can mark this as resolved 🙂

Thx

[Tom]

Your CSS is good 🙂

To use inline-block without affecting mobile, do this:

@media (min-width:769px) {
      .nav-float-right .main-navigation {
            display: inline-block;
      }
}

[Adrian Cojocariu]

Ok 😀 Thx

[Author]

Posts