[Resolved] Changing length of floating navigation

[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

[Tom]

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 🙂

[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

[Tom]

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.

[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

[Tom]

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 🙂

[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!!

[Tom]

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 🙂

[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

[Tom]

Can I see what you have so far?

[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?

[Tom]

Absolutely: https://generatepress.com/contact

[Tom]

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%;
    }
}

[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);
    }
}

[Tom]

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 🙂

[Author]

Posts