Mobile responsive header element

Hi there,

go to Customizer > Layout > Primary Navigation, select the Mobile Icon and try reducing the Menu Item Height. 60px is genearlly a good value.

Hi,

Thank you that worked on the menu.

However, the actual content of the header element still looks naff on mobile. I'm trying to mimic the same responsive style as uswitch.com.

Hi Dax,

Try this CSS to add border to the menu items and the burger menu button:

.main-navigation.toggled .main-nav li {
    border-bottom: 1px solid #3131;
}
.main-navigation .menu-toggle {
    border-left: 1px solid #3131;
}
.main-navigation.toggled .menu-toggle {
    background-color: #000000;
    color: #ffffff;
}

Hi,

Thank you, that made a definite improvement and is much appreciated, however, it wasn't what I was looking for:

It's probably my poor explanation - basically, I'm referring to the blue box with the "Need a new boiler?" section. I would like it to look better and be more responsive to different screens - right now it only really looks good on desktop....

Hi there,

your HTML has inline styles - which makes it tricky to make them responsive.
Could you replace the inline styles with CSS Classes ? Then the CSS can be added using media queries.

Let me know

Hi,

I can't unfortunately, I have limited knowledge. Could you possibly show me an example?

Thank you

Lets try this - remove the HTML from your header element and add this:

<div class="hero-wrapper">
    <p class="hero-title">NEED A NEW BOILER?</p>
    <img class="hero-image" src="https://energyguide.org.uk/wp-content/uploads/2021/05/941-9414673_worcester-bosch-boiler-open.png" width="400" height="600" ;="">
    <p class="hero-text">Get the best deal on an award winning boiler installed next day and you could save £1000s. Installed next day and at a fixed price with thousands of satisfied customers.</p>
    <a class="button hero-button" href="">Lock in Your Fixed Price</a>
</div>

We now have a wrapper and every element has a CSS class that we can use to style with this CSS - which you can add to the Customizer > Additional CSS:

/* Add Padding to wrapper and center all elements on mobile */
.hero-wrapper {
    padding: 20px;
    text-align: center;
}

/* Set font size, weight and margin of title element */
.hero-title {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 0.5em
}

/* Set font size of hero text */
.hero-text {
    font-size: 16px;
}

/* Add style to our hero button */
.hero-wrapper a.hero-button {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    font-size: 24px;
    padding: 10px 30px;
}

/* OPTIONAL HOVER style to our hero button */
.hero-wrapper a.hero-button:hover {
    /* Add different styles for button hover */
}

/* Adjust layout on Larger Screen devices */
@media(min-width: 900px) {
    .hero-wrapper {
        text-align: left;
        padding: 20px 40px;
    }
    .hero-image {
        float: right;
        margin-left: 40px;
    }
}

Fantastic, thank you!

Glad to be of help