header appears strange on mobile devices (android)

bheffaoui · November 2015

Hi,

When I go on this page http://infotika-france.com/informatique the background header is correctly behind the menu and this is what I want. But when I go on this same page with mobile devices, the background header appears after the action bar and after the logo and the menu and I don't like this layout. How I can change this settings ?

Where I have changed the background: Muffin Options > Header & Subheader > Header > Image

Thank you in advance for your reply.

Kind regards.

Albert · November 2015

Hi,

this is how header background works. However, if you don't want to display header backgrounds on mobile devices, you should use below css:

@media only screen and (max-width: 767px) {
    body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }
}

bheffaoui · November 2015

Hi,

Argh I'm not lucky. Thank you for your reply.

But can you help me to do that (or explain me how to do):

- place background header behind my logo (on mobile devices)

- hide the action bar totally (on mobile devices only)

Thank you in advance for your reply.

Kind regards.

Albert · November 2015

To do those 2 thins, you must use @media screen as well as we gave you example above and inside this @media, you must use below css:

#Top_bar { background-image: url('#') !important; }
#Action_bar { display: none !important; }

bheffaoui · November 2015

Hi,

Ok I will test what you propose. Thank you very much.

Kind regards.

Albert · November 2015

You're welcome

bheffaoui · December 2015

Hi,

I tested your two solutions. The second one works but the first don't work. The background header wasn't behind my logo with this css:

@media only screen and (max-width: 767px) {

#Top_bar { background-image: url('#') !important; }
}

Thank you in advance.

Kind regards.

Albert · December 2015

Did you really pasted the css with # sign? # is just an information that you supposed to use LINK TO THE IMAGE instead of that sign.

bheffaoui · December 2015

i replied you with a private message

Albert · December 2015

We did not said anything like that. We just asked if you really did it because it was really weird for us. You were the first person who did something like that since we work in this business. That's why it was so weird for us.

Anyway, we do not understand the question. You asked for css for header background. Howe can we know what is the link to the image you want to use in header? Only you knows where this image is exactly.

bheffaoui · December 2015

ok i got it thank you. i am really bad at design and css and that's why i bought a wordpress theme.

bheffaoui · December 2015

i have one more problem with mobile devices. when i go to this url: http://infotika-france.com/contact/ i can't read correctly this title: "Partenaires et fournisseurs". it was cut

Albert · December 2015

It's because your title breaks into 2 lines while there if fixed height of header. What you can do is increase client's slider header height what can be done with below css:

.clients_slider .clients_slider_header { height: 60px !important; }

bheffaoui · December 2015

nice thank you so much.

Albert · December 2015

You're welcome

header appears strange on mobile devices (android)

Comments