[Support request] Logo overlapping the menu as per

Home Forums Support Logo overlapping the menu as per

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1243278
    Simon

    Hi, I’m trying to replicate the overlapping logo as shown in your image from the second comment within the post. Is this still possible, if so can you help me recreate it please? The post is:

    https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/

    #1243566
    Leo
    Staff
    Customer Support

    Hi there,

    Definitely possible.

    Can you activate this option and make sure the logo is uploaded and link me to the page in question?

    #1244990
    Simon

    Hi Leo,

    I don’t understand which option you refer to. The instructions i have followed thus far include:

    1. Disable your header: – Added in Additional CSS

    .site-header {
    display: none;
    }

    2. Upload a logo to your navigation in “Customize > Layout > Primary Navigation” and set it to “Static + Sticky”. –
    I used Customise > Layout > Header as there was no option to upload an image in Primary Navigation (I guess it’s been updated since the original post?)

    3. Set your navigation logo to be absolute so it’s not confined to the container:
    Added in Additional CSS

    .main-navigation .sticky-logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 160px;
    }
    4. Set the height of the image to auto (or whatever you like): – Added in Additional CSS

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

    The site is behind a holding page at the moment and I’ll gladly give you access however I’m reluctant to put them in here as this is public right?

    I also think this may be a more difficult task than I originally expected as it comes to mind that there is a different logo which is mostly horizontal for in the mobile menu bar and this square(ish) one which i’m hoping to overlap on desktops (and possibly tablets).

    How can I get log in details to you?

    #1245517
    Leo
    Staff
    Customer Support

    I’m sorry – I forgot to provide the link to go with my reply.

    This is the link I’m referring to:
    https://docs.generatepress.com/article/navigation-as-a-header/

    You can actually undo all of the steps you listed above and just click to activate the option.

    Once you do that, I can provide the CSS to make it work.

    Let me know 🙂

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