Transparent manu background on mobile devices

jussufbenjussuf · January 2016

Hi!

Great theme! I already went through tons of discussion threads and therefore have found this solution of yours concerning the color adjustment of mobile menu background.

@media only screen and (max-width: 767px) {
    #Header #menu { background: #000 !important; }
}

However, I'd like the mobile menu background to stay transparent. Is that possible with this theme? If not, can you think of any workarounds? My site looks awesome on Desktop, but highly improvable on smart phone.

The background image is very important to the site and unfortunately it is massively capped on mobile devices.

Adress is www[dot]ideenschmiede[minus]eibauer[dot]de

Thanks for your kind support.

Albert · January 2016

Hi,

to make the mobile menu completely transparent, you should use the following css:

#Top_bar #menu { background: transparent !important; }

jussufbenjussuf · January 2016

Wow, thats what I call a promt support. I will add that to the positive rating of your theme!

Unfortunately, there is still a white background in mobile menu (see attached image).

Albert · January 2016

We thought that you meant iPads only. To make header completely transparent on phones as well, please use the following css:

#Top_bar, #Action_bar { background: transparent !important; }

jussufbenjussuf · January 2016

Did you guys know that you are awesome? ^:)^

There is one more thing: The separator.

When I used it, the font size was always way too small (a change in costum font size did not take effect). See image as an example:

When I inspect the item using firebug, it says...

h4 {
font-size: 35px;
line-height: 39px;
}

I tried a workaround with a costumm css, but when I realized that the font size of separator would not decrease using a mobile phone (although box "decrease font size" is checked), I deleted the costum css.

Do you see a way of having
(1) cotumized separator font size
(2) that still decreases with smaller resolutions?

Thank you for your help.

Albert · January 2016

1) We are sorry but we do not see any way of having customized separator font size unfortunately.

2) Yes, this line and it's font decreases with the smaller resolutions.

jussufbenjussuf · January 2016

I'm sorry, I don't wanna bother you. But I think you misunderstood my last question:

Can you see the small separator font size in the picture?
The theme does not take over the font sizes from the options menu (there it states for ALL headings h1, h2, h3, h4, h5, h6 = font size 35).

Do you have an idea why that is the case?

Albert · January 2016

Some headings got own hard-coded sizes and does not take the sizes from muffin options panel. So if you want to change it's size, you need to do it with custom css.

Transparent manu background on mobile devices

Comments