Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support how to customise logo in transparent header / sticky navigation

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

    GP Premium 1.3.1
    #358674
    Leo
    Staff
    Customer Support

    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!

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

    #358879
    Leo
    Staff
    Customer Support
    #359083
    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.

    #359165
    Leo
    Staff
    Customer Support

    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/

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

    #359292
    Leo
    Staff
    Customer Support
    #359307
    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.

    #359314
    Leo
    Staff
    Customer Support

    Sorry forgot the header is hidden.

    What about setting the alignment to right?

    #359320
    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)?

    #359325
    Leo
    Staff
    Customer Support

    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.

    #359328
    B

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

    #359343
    Leo
    Staff
    Customer Support

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

    Will ask Tom to have a look 🙂

    #359553
    Tom
    Lead Developer
    Lead Developer

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

    #primary-menu {
        padding-left: 150px;
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.