[Resolved] how to customise logo in transparent header / sticky navigation

[B]

Hi,

I’m trying to create a header and sticky navigation similar to this site.

In particular, to have the logo appear only in the navigation bar and be larger than the height of the nav bar itself (with a drop shadow to make it appear like the logo is hovering above the page). Please advise whether / how I can do this with GP.

I’ve followed the instructions given in a previous post:
https://generatepress.com/forums/topic/transparent-header-that-turns-into-second-sticky-header-on-scroll-down/#post-358340

This has got me most of the way there. To get the logo to the required size, I’ve set the Menu Item Height to the max (150px) for desktop and smaller for mobile. However, ideally I’d like to make the following changes:
1. in desktop view, to have the logo larger / higher than than the height of the navigation bar and with a drop shadow (as in the above site).
2. I’d also like to make the logo larger in mobile view, but if I do so, this makes the height of the menu items too large when I click on the drop down menu. Is there a way to specify the size / height of the logo & menu item height separately?

I’d also like to have one of the menu items appear like a button. I’ve included the CSS you gave in a previous post:
https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607

… but this doesn’t really appear as a button given that I’ve set the Menu Item Height to the max. Please advise how to amend the CSS so the border of the button hugs the text more closely (vs filling the whole height of the menu item).

Many thanks! Really appreciate your support.

[Leo]

Hi there,

This might help with floating logo: https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/#post-246468

Can you provide a link to your site so we can see what you’ve done so far? Thanks!

[B]

Hi,

Thanks for your reply. I’ve had a go at the changes you suggested, but it hasn’t fully achieved what I was aiming for (hopefully I haven’t made any coding errors).

Here’s a link to the site.

On the static menu…
The logo is now larger than the height of the menu items (as requested).
However, the position of the logo is now on top of the menu items rather than to the left of them. Please advise what CSS is required to fix this (i.e. to shift the menu items to the right). I tried altering the .sticky-logo {left margin..} but this messed things up in mobile view (with the logo going half off the page).
I’d also like to change the background color of the static menu, but haven’t been able to find a setting for this (either in the customize or Edit page sections).

In the sticky menu…
The logo size is unchanged from before (I’d like it to be the same size as in the static menu). It also appears to be hidden behind the menu background rather than hovering above it (and behind the menu item text rather than to the left of it).

Given the logo is a different size & position on the static & sticky menus, it’s not giving the nice smooth transition I was hoping for (perhaps this just requires lots of adjustment to get just right?).

Thanks

[Leo]

Can you follow the instruction here to merge? https://docs.generatepress.com/article/merging-header-navigation-content/

[B]

I’ve followed the instructions to merge & updated the site accordingly.

I’m hoping to have a visible static menu bar (to look similar to the sticky one) with background color set with some opacity so that the content below can be seen (as in the example site I mentioned). To try to achieve this, I had the ‘transparent navigation’ option unchecked, but this seems to then cause issues with the logo appearing below the menu rather than above it.

Please advise what further steps are required to get the desired effect.

[Leo]

Try editing this CSS:

.main-navigation .sticky-logo img {
    height: 150px;
}

to

.main-navigation .sticky-logo img {
    height: 150px !important;
}

And navigation location to float right: https://docs.generatepress.com/article/navigation-location/

[B]

Great! The logo is now the same size & position on the static & sticky menus.

Please advise how to shift the menu items to the right – so they’re not on top of the logo.

[Leo]

Can you try setting the navigation location to float right? https://docs.generatepress.com/article/navigation-location/

[B]

No, that didn’t fix it… the menu & logo disappear altogether if I change Navigation Location to float right.

Changing navigation alignment to center does improve the layout slightly (to the extent that the logo is then separate / left of the menu items), but I don’t really want the menu centered.

[Leo]

Sorry forgot the header is hidden.

What about setting the alignment to right?

[B]

Yes, I tried that too… not really the look I was after though. Sounds like there is no easy way to shift the menu items say 200px to the right then (without also shifting the logo with them)?

[Leo]

Can you set it to right so I can take a look?

I think it’s doable but you will run into some responsive issue if the screen size is smaller.

[B]

Set to right for you to take a look at it. Thanks

[Leo]

Hmm yeah I’m not sure what the best way to accomplish it without responsive issue.

Will ask Tom to have a look 🙂

[Tom]

Since we know the logo is going to stay 150px wide, we should just be able to do this:

#primary-menu {
    padding-left: 150px;
}

[Author]

Posts