[Support request] Mobile view – Header and home picture cover

[Pietro]

Super!!!
Thanks again Ying, it’s works!!!!

For the background color and text color, I would like to change them only in mobile.

Pls, let know …
Thanks in advance.

[Ying]

Let me know how this CSS works 🙂

@media (max-width: 768px) {
    .navigation-branding .main-title {
       background-color: #515151;
    }
    .navigation-branding .main-title a {
        color: #fff !important;
    }
    button.menu-toggle {
        background-color: #515151;
    }
}

[Pietro]

It works!!!! (partially) …
as you can see I define #0693e3 as per background color of the site name and withe for the text.

I would like to ha the blue for the full width of the row, now it’s blue just for the name.

I Apologize but I’m not able to reduce the height of the headlines.

Thanks again (quite finish 🙂 )

[Ying]

Try this instead for the site name 🙂

#mobile-header .navigation-branding {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    background-color: #0693e3;
}
#mobile-header .navigation-branding .main-title a {
    color: #fff !important;
}
#mobile-header .navigation-branding .main-title {
    margin-left: auto;
    margin-right: auto;
}

For the menu toggle:

#mobile-header.main-navigation button.menu-toggle {
    width: 100%;
    background-color: #515151;
    color: #fff;
}

[Pietro]

It works!!!
a strange thing happens: if I look at my site on my iPhone I see the 2 header lines only on 3 pages (METHOD, ABOUT ME and BLOG).
I see that I have to fix something in the height of the pages but the lines are there.
I don’t see them in the Home and in the CONTACTS page.

if I look from the desktop (icon for mobile) all the pages have the 2 lines.

Did I do something wrong?

thanks a lot🙂

[Ying]

It’s probably caching issue, could you clear cache and disable your caching/performance plugin to test?

Let me know 🙂

[Pietro]

ok, solved!!
was a problem with the hight of the pages.

Many thanks in advance for your (patient) support 🙂

P

[Pietro]

just a little question again …

In mobile view (mobile icon in apparence>customize) if I click on menu, it open on the left of the screen and not in center.

I didn’t find where I can control the alignment of the menu in mobile view.

Thanks in advance for you help

P

[Ying]

Hi Pietro,

Could you open a new topic for this one?
Thank you!

[Pietro]

Ok, apologize.

P

[Author]

Posts