Header overlay

  • Resolved mwinterm

    (@mwinterm)


    3 years, 6 months ago

    Hi Anders,

    I tried using ‘Easy Notification Bar’ plugin to display a small info bar above the header, and it works fine except for mobile. On mobile the notification bar is covering the site name and the menu button. Below is the reply I received from the plugin author:

    So what’s happening is that the site header is using some sort of “Overlay Header” functionality available in the theme and so it’s placing the header at the top of the site in an absolute position which would make it render under the notification or anything else at the top of the page. And the reason it renders poorly on mobile is because the CSS used to add padding to the overlay header is only being applied on larger screen sizes.

    It only happens on the main page where I’m using Full Width Cover template. I also tried a couple of different but very similar notification bar plugins, and the result is the same. So I was wondering if there is potentially a CSS fix to this?

    Many thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @mwinterm,

    If you post a link to the page, I can see if I can figure out a CSS solution.

    — Anders

    Thread Starter mwinterm

    (@mwinterm)

    Hi Anders,

    The link is: https://cotswoldcostumes.com

    Thanks very much for looking into it.

    Theme Author Anders Norén

    (@anlino)

    Hi @mwinterm,

    No problem. Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and add the code below:

    .has-easy-notification-bar.overlay-header .easy-notification-bar:not(.easy-notification-bar--hidden) ~ #site-header {
	top: 78px;
}

@media ( min-width: 440px ) {
	.has-easy-notification-bar.overlay-header .easy-notification-bar:not(.easy-notification-bar--hidden) ~ #site-header {
		top: 50px;
	}
}

    The CSS will move the site header to be shown below the notification bar as long as the notification bar is visible. When the bar is closed, the header is moved back up to the top of the overlay.

    Keep in mind that if the amount of text in the notification bar changes, you’ll need to tweak the pixel values in the CSS to make sure that the top value matches the new height of the bar. For example, if the text is on two lines on mobile, you’ll need to increase the first top value to match the new height of the bar on mobile.

    Also, more text means that the button will be displayed below (instead of next to) the text for longer, so you’ll need to change the min-width: 440px to match the screen width when the button is moved next to the text (at which point the notification bar height changes). But the CSS here should match the text you have there currently.

    — Anders

    Thread Starter mwinterm

    (@mwinterm)

    Hi Anders,

    That’s great, thank you very much for coming back with the solution so quickly.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header overlay’ is closed to new replies.