[Resolved] Header Button and logo styling

Home Forums Support [Resolved] Header Button and logo styling

Home Forums Support Header Button and logo styling

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1634680
    racheljohn

    I am trying to add a custom button only on mobile next to(not in) the mobile nav icon and having trouble figuring out how to do that. and the second issue is I can’t seem to get the mobile logo to be any bigger ( its tiny) I don’t want it a whole lot bigger but still want it to be a little more visible

    #1634967
    Elvin
    Staff
    Customer Support

    Hi there,

    You can create a Hook Element or a Block Element to place your button in and use generate_inside_mobile_header hook to place your button beside the mobile nav icon.

    You can adjust the logo’s size on mobile by using this CSS:


    @media
    (max-width:768px){
    .main-navigation.mobile-header-navigation .site-logo.mobile-header-logo, .main-navigation.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 95px;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1635035
    racheljohn

    Worked great! one last thing I messed with aligning right but its not working and I just centered it for the moment but would love for it to be right next to the mobile menu icon?

    #1635052
    Elvin
    Staff
    Customer Support

    Worked great! one last thing I messed with aligning right but its not working and I just centered it for the moment but would love for it to be right next to the mobile menu icon?

    You can add in a header-btn class to the Container Block you’ve added within the Block Element.

    You then add this CSS:

    .header-btn{
    margin-left:auto;
    }

    As for its vertical alignment, you’ll have to edit that within the Container Block’s settings.

    We then try to reduce the padding for the menu icon with this CSS:

    #mobile-header.main-navigation .inside-navigation button.menu-toggle {
        padding: 0 20px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1635819
    racheljohn

    Thanks so much for all the help!

    #1636375
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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