[Resolved] Floating navbar problem

Home Forums Support Floating navbar problem

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #106817
    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.

    #106907
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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

    #106998
    Tom
    Lead Developer
    Lead Developer

    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;
          }
    }
    #107030
    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. ?

    #107034
    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

    #107079
    Tom
    Lead Developer
    Lead Developer

    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?

    #107261
    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.

    #107412
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #107418
    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

    #107510
    Tom
    Lead Developer
    Lead Developer

    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;
          }
    }
    #107609
    Adrian Cojocariu

    Ok 😀 Thx

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.