[Resolved] Add a button to mobile header?

[Edin]

I want to add a button to the mobile header. So I used the hook “generate_inside_mobile_header” and added the following:

<a class="button header" href="https://www.google.com" target="_blank" rel="noopener noreferrer">FREE Help</a>

I styled the button:

.subscribe-button {
    background-color: #ed145a;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 3px;
    height: 36px;
    letter-spacing: 1px;
    padding: 8px;
}

The problem is that it’s a little crowded now. It looks stuffed.

Any idea how I can make this better?

Remove the magnifier? Move the menu to the left, then the logo, the button, then magnifier? How do I rearrange things in the mobile header?

I only want to do this on mobile.

I’m grateful for any suggestions.

Thank you,
Edin

[David]

Hi there,

can i see the site ? Then i can have a play with some options

[Edin]

Thank you David, I’ll put the link to the staging site in the “Private Information” box.

[David]

Can i have the maintenance mode password ?

[Edin]

Ah sorry, David.

Added! (it’s also admin login to this staging site, so feel free to experiment if you like).

[David]

You could try this CSS:

/* move menu hamburger to left of logo &/
@media (max-width: 768px) {
    #mobile-header .menu-toggle {
        order: -1;
    }
}
/* on small screens move button below header and center logo */
@media (max-width: 361px) {
    .button.header {
        order: 100;
        flex: 1 0 100%;
        text-align: center;
    }
    #mobile-header .site-logo {
        margin: auto;
    }
}

[Edin]

Thank you, David, adding the CSS had no effect? What did I do wrong?

[Ying]

I don’t see the CSS on your site, where did you add it?

Can you try adding the CSS to the top of all your CSS code to avoid error is your other CSS?

Let us know!

[Edin]

Thank you. I added this now to the top of the customizer/CSS. That didn’t work.

Then I tried adding it to my style.css in the “Theme File Editor”. Also no effect, unfortunately.

[Edin]

Ok, I found the issue (sorry, I didn’t see this before). In the above CSS, there was a */ missing in the first line.

It looks much better now.

If I wanted to remove the magnifier, how would I do that?

Thank you!

[David]

You can disable the Navigation Search in Customizer > Layout > Priamary Nav.

[Edin]

Thank you, David. Looks much better now:

Is there a way to move the logo a little closer to the menu and add a little margin-right to the button?

Also, how can add the search to the menu (so that it’s on top when someone taps on the menu)?

Thank again. This has been very helpful!

[Ying]

Try this CSS to add a margin to the button:

.button.header {
    margin-right: 20px;
}

To move the logo, feel free to adjust the value:

.mobile-header-navigation .site-logo {
    margin-right: 30px;
}

[Edin]

Thank you, Ying.

Margin-right, no problem, but moving the logo to the left doesn’t work. Are previous entries interfering?

Here’s the whole mobile header CSS:

/* Mobile Header  */
.button.header,
.button.header:visited {background: #ED145A !important; color:#fff !important; padding: 8px;padding: 8px; font-size: 14px; font-weight: 900;}
a.button {text-decoration: none !important;}
blockquote { position: relative; padding: 0 0 0 1em; border-left: 0.2em solid #ed145a; font-size: 20px; line-height: 1.5em;}
/* move menu hamburger to left of logo */
@media (max-width: 768px) {
    #mobile-header .menu-toggle {
        order: -1;
    }
}
.button.header {
    margin-right: 10px;
}
.mobile-header-navigation .site-logo {
    margin-right: 30px;
}
/* on small screens move button below header and center logo */
@media (max-width: 361px) {
    .button.header {
        order: 100;
        flex: 1 0 100%;
        text-align: center;
    }
    #mobile-header .site-logo {
        margin: auto;
    }
}
@media(max-width: 750px) {
    .single-post .entry-content img {
        margin-left: -15px;
        margin-right: -15px;
        max-width: 100vw;
    }
}

Thank you so much!

[David]

In your current CSS remove this:

#mobile-header .site-logo {
    margin: auto;
}

Then add this CSS:

@media (max-width: 768px) {
    #mobile-header .site-logo {
        margin-right: auto;
    }
}

This will align the logo to the left, you can adjust the 768px to suit

[Author]

Posts