[Resolved] Mobile menu

Home Forums Support Mobile menu

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1275767
    Matt

    When I edit my menu item height in the mobile side of customizer it works like it should with the menu items but it also changes the size of the logo. Why? If I want my menu items to look the way I want my logo has to be shrunk to the size I can barely see it. https://imgur.com/a/6VecCFj

    #1275872
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try this CSS to remove the default top and bottom 10px padding and see if it works for you?

    .site-logo.mobile-header-logo img {
        padding: 0;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps 🙂

    #1276890
    Matt

    That did not work.

    #1276943
    Leo
    Staff
    Customer Support

    Not seeing my CSS being added.

    Can you confirm?

    #1278953
    Matt

    I removed it when it didn’t work. I added it to additional CSS exactly as you posted it to me and hit publish. Then I cleared cache and reloaded fresh local copy of the webpage by holding shift while refreshing. The problem persists. I can add it back but it didn’t work. When I resize them using the bar this icon still resizes. Should it even be attached to the menu items? Shouldn’t the menu bar be sized to the logo height and the menu items size separately?

    #1279312
    Leo
    Staff
    Customer Support

    I can see the CSS working now.

    As mentioned the CSS removes the default top and bottom 10px padding so the logo size height is exactly the same as the menu item height instead of -20px by default.

    Right now your logo height is 55px which is as big as it can get without going outside the container.

    Do you want the logo to go outside the container or something?

    #1279487
    Matt

    Actually yes. I wanted the logo to float over and below the menu. I even wanted it to z-index on top of the sub menu drop down. I’ll link a picture of what i’m looking for on mobile and desktop. If i have to get rid of the site logo in the menu and show it in the menu somehow as a class or whatever to get it to work i’m all for it. Not sure how exactly to do it though. If that’s what it takes i’m up for swapping it over.

    View post on imgur.com

    #1280010
    Leo
    Staff
    Customer Support

    Try this CSS:

    .main-navigation .site-logo {
        position: absolute;
        left: 0;
        top: 0;
    }
    .main-navigation .site-logo img {
        height: 130px;
    }
    #1280733
    Matt

    That works great for desktop but it moves it on mobile too. Mobile it’s too big and covering items on the menu and desktop it looks fine. Also trying to get my cart to show number of items and value below the number of items. span.amount span.number-of-items not sure how to use the flex or whatever to get them to stack on top of each other and both show up.

    #1281231
    Leo
    Staff
    Customer Support

    Let’s solve the logo issue first.

    Wrap the CSS above in desktop media query only:
    https://docs.generatepress.com/article/responsive-display/

    Then we can take a look at the mobile logo.

    #1281343
    Matt

    Alright that issue is fixed. Cart issue now? 😀

    #1281345
    Leo
    Staff
    Customer Support

    Can you open a new topic for the cart question?

    I’ll mark this one resolved so you can open another topic.

    Thanks 🙂

    #1281358
    Matt

    Actually hold up on that. Mobile logo looks fuzzy. I should probably use a different size in it’s place right or is that what the retina is for?

    #1281624
    Leo
    Staff
    Customer Support
    #1282331
    Matt

    Alright so when I upload the SVG it doesn’t allow me to choose any area to crop which is fine but doesn’t offer a skip cropping option until I try to drag and drop the svg image on the svg cropping area. Once it get it added in by hitting skip cropping because I can’t see anything it put the image up as a black and white even though the SVG is set to color image. I think it has to do with the original file being a PNG because of the transparency to float on the background does SVG not handle transparent properties?
    4 images on this link

    View post on imgur.com

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