header on mobile

khoogteyling · September 2018

Hi BeTheme,

[Links visible only for registered users]

On mobile How can I keep the same Header (as on desktop view) with overflow logo:

- header bg white with menu-hamburger in middle

- sticky and not with large white padding below (on mobile), or totally disappearing

Pablo · September 2018

Hi,

1) All possibilities of responsive menu are in Theme Options > Responsive > Header

2) Paste this Custom CSS into Theme Options > Custom CSS & KS > CSS

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

Thanks.

khoogteyling · September 2018

almost there, thx!

Q: please do show fixed header on mobile views — not small & hamburger too high up

for instance @ view port width 1007 px

Like when scrolling body content upwards

Pablo · September 2018

Please paste this Custom CSS code

@media (min-width:767px) and (max-width:1240px){
	.top_bar_left{
		min-height:60px;
	}
	
	#Content{
		margin-top:25px;
	}
}

Thanks

khoogteyling · September 2018

Sorry to bother you again, and maybe I have done wrong settings but:

- on mobile I can see (and by inspection) …

@media only screen and (max-width: 767px), all
responsive.css:693body:not(.template-slider):not(.header-simple) #Header {
min-height: 350px;
background-position: center 202px;

Which causes the content starting under header far too low / not visible.

Let me try to explain what I would like to see:

1 - desktop view: fine (= logo overflowing small-height menu, fixed header )

2 - mobile views: would like to see same behavior: (= small logo overflowing small-height menu-bar, fixed header)

3 - do I need to start over and make use of Subheader (with white bg color?) to force content downwards on all pages, see my pages (now starting under Header fixed)

[Links visible only for registered users]

4 - only adjustment to make is on Home page where I start with Slider Rev ?

5 - or make on every page an Section/Padding for the content? Then how to adjust for Mobile views

Hope you can help me out here, much appreciated!

Pablo · September 2018

Hi,

Please delete this comments, they are interrupting the CSS code.

[Links visible only for registered users]

Also, paste this CSS code:

@media (min-width:767px){
	body.blog #Content{
		padding-top:160px;
	}
	
	body.page-template-default:not(.home) #Content{
		padding-top:160px;
	}
}

Everything will be fine now.
Thanks.

header on mobile

Comments

This website uses cookies