[Support request] Logo doesn´t appear in sticky navigation

Home Forums Support [Support request] Logo doesn´t appear in sticky navigation

Home Forums Support Logo doesn´t appear in sticky navigation

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2048371
    Mårten

    Hi!

    I´m using this code to center logo in primary navigation.


    @media
    (min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    }

    #site-navigation {
    margin-left: unset !important;
    display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
    margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
    flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(3) {
    margin-left: auto;
    }
    }

    The problem is that the logo doesnt´t appear in the sticky navigation.

    Can you please help me to solve that problem?

    #2048455
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site ?

    #2048500
    Mårten

    Thanks for quick reply.

    Here is the site: https://kinnekullegarden.concil.nu/

    #2048605
    David
    Staff
    Customer Support

    In the CSS – this:

    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    needs to change to:

    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding,
    .sticky-menu-logo .navigation-stick:not(#sticky-placeholder) .navigation-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }
    #2049580
    Mårten

    It works but now the logo is to high on the english part of the site: https://kinnekullegarden.concil.nu/en/start-2/

    Do I need to change anything further in the code?

    Thans for your help, David.

    #2049689
    David
    Staff
    Customer Support

    I think the English site is suffering from the lack of Menus – the menus are what give the header its height. Adding some menus should fix the problem.

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