[Resolved] Split Logo Overlapping Slider Image

Home Forums Support Split Logo Overlapping Slider Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #886067
    Gerson

    Hi, I’m having a bit of trouble with the way the logo and menu items are displayed. I’m wanting the logo in the middle of the header to over-hang the header – over the slider – so half the logo is below the header and half of it is on it. I also need the two menu times to be displayed one on either side of the logo – but I need them to look evenly spaced. Can you please help?

    site is: https://myworklicense.com.au

    #886260
    David
    Staff
    Customer Support

    Hi there,

    so edit this CSS and add the line i have commented:

    .site-branding,
    .site-logo {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 200;
        top: 0; /* Add this */
    }

    Then add:

    @media (min-width: 768px) {
        .navigation-branding img {
            height: 160px !important;
        }
        .main-navigation .main-nav {
            width: 100%;
        }
    }
    #886267
    Gerson

    Thanks David – that worked nicely! How can I move the menu items closer to the logo?

    #886289
    David
    Staff
    Customer Support

    This part of the above CSS:

    .main-navigation .main-nav {
        width: 100%;
    }

    Could add some margin to it like so:

    .main-navigation .main-nav {
        width: 100%;
        margin-left: 10%;
        margin-right: 10%;
    }
    #886295
    Gerson

    Brilliant!

    #886377
    David
    Staff
    Customer Support

    Awesome – glad to be of help

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