[Support request] Logo Centered

Home Forums Support Logo Centered

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1146083
    David

    Hi, i get the logo center to work, but i have issue with the mobile version. They is out of line and when i click on the burger menu my logo shows up too. I read some article about logo centered. I use the css and used it the css option in the menu. Also the search icon is center too. How i can remove the search on the mobile version. Or how i can the the logo to the top position. Also when i open the burger menu, how i can remove the logo from them?

    Thank you.

    #1146363
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    .toggled .site-logo {
        display: none;
    }
    
    #mobile-header .menu-item-separator {
        display: none !important;
    }

    If you want your logo to display, you can try this:

    .toggled .site-logo {
        top: 0;
    }

    However, it may not have room.

    Let me know 🙂

    #1146376
    David

    Thanks Tom,

    it is working, but my main logo is still over the menu.

    Maybe you can add the option to be logo center for the next big Theme/Premium Plugin update. I appreciated your help. You do a awesome job.

    I love your Theme/Plugin.

    #1146377
    David

    The logo is gone on the burger menu, but still the main logo is overwriting the menu.
    Can we fix that?

    #1146378
    David

    And one more thing on the desktop view, i have a space in the floating menu.

    #1146677
    David
    Staff
    Customer Support

    Hi there,

    looking at mobile – i see two things:

    1. The logo is too large to fit between hamburger and search/cart icons. Maybe a smaller logo for the Mobile Header would fix that ?

    2. The Search icon is currently behind the Logo. You need to edit this CSS and remove the margin property i commented below:

    #mobile-header .mobile-bar-items {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
        margin-left: auto; /* Remove this */
    }

    And then add this:

    #mobile-header .mobile-bar-items:not(.wc-mobile-cart-items) {
        margin-left: auto;
    }
    #1146818
    David

    Thanks David for your support,

    but it was not working. Still the same issue. I used a smaller logo, but it stretch out and looks bad quality. Search/cart doesn’t changed.

    #1147261
    David
    Staff
    Customer Support

    Ok now add this CSS – that should move the search icon.

    #mobile-header .mobile-bar-items.wc-mobile-cart-items {
        margin-left: unset;
    }

    And then this CSS:

    #mobile-header .site-logo.mobile-header-logo img {
        width: 200px;
        height: auto;
    }

    Adjust the width property to suit

    #1147472
    David

    Yes David,

    it is working. Thanks for your awesome support. I like to have to logo more in the top, but i can life with them.

    Last open thing what i have, how i can fix the gap between “grill” and “shop” on the desktop version floating menu? I have a to much space between.

    #1147497
    David

    David,

    i added css and it works `.main-navigation .menu-item-separator a {
    font-size: 0;
    background: transparent !important;
    display: none;
    }`

    Thanks a lot.

    #1147588
    Leo
    Staff
    Customer Support

    Just took a quick look and doesn’t look like the CSS is actually doing anything.

    What happens if you remove that CSS and also the menu item text “Menu” for the separator item?

    #1147595
    David

    Hi Leo,

    for me it is working fine. Where you saw a issue?

    #1147607
    Leo
    Staff
    Customer Support

    When I remove your CSS above using browser inspect, the spacing looks exactly the same except the text Menu is showing:
    https://www.screencast.com/t/E1XfMvYvn

    So I figure you could just remove the menu label text and save the CSS.

    Maybe I’m missing something though.

    #1147687
    David

    When I remove the menu label, i can’t save the separator. I was following your description:
    https://docs.generatepress.com/article/centering-logo-navigation/

    I guess for now it works for me.

    To all thank you very much for your support.

    #1147688
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.