Mobile Responsive Header Logo and Menu

Systemdownnn · September 2016

Hi,

I have Used the BeTheme to create a nice simple website however i just need some help with adjustment of Header section of Responsive mobile site.

For the Home Page i have a Full Page Slider using Rev Slider and i have set the following Settings

--> BeTheme Options --> Header & Sub Header --> Layout --> Style --> Overlay Menu (Sticky Header affects ONLY the menu button)

Than

--> Responsive --> General --> Transparent ( ON )

So looks great for homepage on both mobile and desktop.

However for the other pages the Logo goes over content on mobile version and so there are txt or other content behind the logo.

Here are the settings for the internal pages.

Created a Layout with following settings... which i have applied for all internal pages.

Layout --> My Layout --> Header Style --> Stack: Center
--> Minimalist without header space (ON)

What can i do so that for the responsive version with my settings the header is not messed up for internal pages ?

And also how can i also make the Responsive Mobile version also use the Style --> Overlay Menu (Sticky Header affects ONLY the menu button) BUT For desktop to use Header Style --> Stack: Center ??

Thank You

Albert · September 2016

Hi,

1. Please send us link to page where you got this header so we can have a look on it.

2. About the second question, it is not possible to display different header on desktop than on mobile unfortunately.

Thanks!

Systemdownnn · September 2016

Thank you

http://www.dessiign.com/webk/our-work/

Albert · September 2016

Ok, thanks. So the header is messed up because you activated transparent header on mobile. This is the whole sense of being transparent and this couldn't be changed. The only thing you can do is move the content down on mobile on all pages except home and this could be achieved with an extra css:

@media only screen and (max-width: 767px) {
    .body:not(.home) #Content { padding-top: 160px !important; }
}

Systemdownnn · September 2016

Hi and thank you for the reply,

Pasted the code in all the internal page Custom CSS and didnt work.. also tried to use the code in Theme Option Custom CSS.. didnt work.

Albert · September 2016

Sorry, there is unnecessary dot before the body. The right css supposed to be:

@media only screen and (max-width: 767px) {
    body:not(.home) #Content { padding-top: 160px !important; }
}

Systemdownnn · September 2016

Perfect Thank you

Albert · September 2016

You're welcome!

Mobile Responsive Header Logo and Menu

Comments

This website uses cookies