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

[Resolved] Changing length of floating navigation

Home Forums Support Changing length of floating navigation

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #207455
    Tim

    Hello,

    I have a few questions about formatting my header/navigation bar and I’ll go ahead and ask them all because they may be related:

    I have my header configured with a logo on the left and the navigation bar floating right. I would like the bottom of the logo to line up with the bottom of the navigation bar so the two look connected. The bottom right corner of my logo would be the same height and color as the navigation bar so it looks continuous. I used the following code from another forum post to get the logo and navigation bar to the same height:

    @media (min-width: 769px) {
        .main-navigation {
            margin-top: 145px; 
            
        }
    }

    Question 1) How do I get the floating navigation bar to extend exactly to the end of the logo? I’m assuming it has something to do with the left padding, but I am not a programmer and have never used CSS before.

    Question 2) Once the logo and navigation bar are connected, there will be an issue where as the screen gets smaller the navigation bar will run out of padding and displace the logo before the screen width is narrow enough to go into tablet mode. Is it possible to lock the logo in place and let the navigation bar overlap it or shrink if it gets close enough to displace the logo?

    Question 3) Ideally, I’d like to have text (contact info) to the far right above the navigation bar. Is that possible with this configuration? This area is the “top margin” for the navigation bar based on the code above so I’d imagine there could be complications there. If it is not easy to do, I can do without it.

    Thank you,

    Tim

    #207469
    Tom
    Lead Developer
    Lead Developer

    Hi Tim,

    The answers to your questions are all pretty complicated and would require a decent amount of CSS to accomplish.

    I think I might have an easier way to accomplish things.

    Use the Menu Logo option in Menu Plus. Upload your logo, and set it to display in Regular + Sticky.

    Pre-1.3.32 you can find these options in “Customize > Menu Plus > Sticky Menu”.

    1.3.32 and on, these options are in “Customize > Layout > Primary Navigation”.

    Once this is done, set your navigation position to below header or above header, then hide the header with some CSS:

    .site-header {
        display: none;
    }

    Once you’ve completed the above, we can continue working towards the end result you’re looking for 🙂

    #207681
    Tim

    Thanks for the quick reply Tom. I tried what you suggested. At the moment, it is further from what I was looking for but it may be easier to fix than the other way.

    Putting the logo in the navigation bar makes it really tiny to fit in the bar. The logo is also the same color as the bar with a transparent background, so you really can’t see much of it as it is.

    For this method to work, there would have to be a way to allow the logo to be larger than the navigation bar and to get rid of the coloring in the navigation bar only behind the logo. Are those easier to do?

    The site is not live yet but here is a screenshot of what I had before. I’d like the site to look like this but with the gap closed between the logo and the navigation bar: https://postimg.org/image/s27t2umd3/

    I can solve question 2 by resizing the logo and navigation bar so that it changes to tablet mode before it overlaps – that won’t be a problem at all. Question 3 I can do without.

    If all I want to do is fill in the gap between the logo and the navigation bar, does that simplify things or is it still too complicated?

    I don’t know CSS but I’m happy to learn whatever I need to know if there is a direction you can point me in.

    Thank you,

    Tim

    #207729
    Tom
    Lead Developer
    Lead Developer

    Ah I see what you’re going for – that’s tough. The method I suggested won’t work for that.

    Can you set it up like in the screenshot and then send me the URL? I’ll play with the CSS for a minute to see if I can come up with something.

    #208046
    Tim

    Hello Tom,

    You can view what I have at http://dev.rbinspections.com/

    Let me know if there is any further information you need. If you have an idea but don’t have time to mess with it, if you give me the basics and point me to some resources I can see if I can figure anything out.

    Thanks,

    Tim

    #208174
    Tom
    Lead Developer
    Lead Developer

    I know I answered this at some point – finally found it: https://generatepress.com/forums/topic/logo-and-menu-float-left-problem/#post-172554

    Do the above, then remove that margin top you added.

    You would need to vertically align your logo as well, so your code would be:

    .nav-float-right .main-navigation {
        float: none;
        display: inline-block;
        vertical-align: bottom;
    }
    
    .site-branding,
    .site-logo {
        display: inline-block;
    }

    As well as the PHP code in the linked topic.

    That should get you much closer 🙂

    #208316
    Tim

    That seems to do the trick!

    I have not uploaded it to the link, but I did what you said and these were the additional things I had to do to get it working:

    There was a gap and I tried several things to get rid of it. I ended up doing a -6pt margin and it took care of the gap between the logo and the navigation bar. Also, there was a second navigation bar that when I “inspected” the code on Chrome determined it was a “Mobile-header-navigation”. Below is the code I used to fix both of these. I only know enough about coding to get myself in trouble so could you tell me if either thing I did will have other consequences I don’t know about?

    
        .nav-float-right .main-navigation {
        float: none;
        display: inline-block;
        vertical-align: bottom;
        margin-left: -6px
    }
        .nav-float-right .main-navigation.mobile-header-navigation {
            display: none;
        }
        .site-branding,
        .site-logo {
        display: inline-block;
    }

    Also, this is all under “@media (min-width: 769px) {” because I didn’t want to mess things up in any other mode.

    It looks good but I’m concerned about using a negative margin because it just seemed too easy. Let me know if this is a good solution. Thanks!!

    #208318
    Tom
    Lead Developer
    Lead Developer

    display: inline-block can cause some spacing in some browsers. Using a little bit of negative margin won’t hurt.

    Hiding the mobile header shouldn’t be necessary, you can just turn it off if you don’t want it in “Customize > Layout > Header”.

    Glad that it worked for you 🙂

    #209166
    Tim

    Hello Tom,

    Thank you again for all of your help with this! One more question:

    With the structure we used to set this up, what would it take to extend the navigation bar to the right edge of the container and have all the menu options right aligned?

    Tim

    #209289
    Tom
    Lead Developer
    Lead Developer

    Can I see what you have so far?

    #209290
    Tim

    I have password protected the site until I finish working on it. Is there somewhere I can email you the access information not on a public forum?

    #209367
    Tom
    Lead Developer
    Lead Developer
    #209890
    Tom
    Lead Developer
    Lead Developer

    Hmm, the best thing I could come up with was something like this:

    @media (min-width: 769px) {
        .site-logo {
            width: 35%;
        }
        .nav-float-right .main-navigation {
            width: 65%;
        }
    }
    #210097
    Tim

    I tried tried your suggestion and edited it a little bit. It seems to work on chrome and IE 11. Do you think this is a safe solution? It stops the logo from shrinking and stops the bar from jumping below the logo as you shrink:

    @media (min-width: 769px) {
        .site-logo {
            width: 350px;
        }
        .nav-float-right .main-navigation {
            width: calc(100% - 350px);
        }
    }
    #210098
    Tom
    Lead Developer
    Lead Developer

    calc is awesome, just not supported by all browser.

    Take a look: http://caniuse.com/#search=calc

    If that’s good enough, then it’s an awesome solution 🙂

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