Adding a Widget Area Before Site Header

[jbendiner]

I am developing my new site with the Parallax theme and would like to add a small menu above the header, as in my current site: http://www.technologix.ca/

I followed the tutorial by Brian Gardner
http://briangardner.com/add-widget-area-site-header/

but (surprise, surprise) things are not looking as they should.
The URL is: http://logisticsnetworkdesign.com/.

At first glance it looks as if the code is adding the widget area below the header (white band) but if you increase the zoom enough the widget eventually 'moves' above the header.

I am quite sure this is a styling issue, but have no clue how to fix it. Any suggestion would be welcome!

Jerry

http://logisticsnetworkdesign.com

[Brad Dalton]

What happens if you use the genesis_before hook rather than genesis_before_header?

---

Tutorials for StudioPress Themes.

[Johann Kratzik]

By viewing your website I noticed that the navigation is actually inside the header, not above. Is it intended like this?

To remove the white gap, simply delete the margin-top from .parallax-home .site-inner in style.css

---

Offering customization work for FREE – Read more

[jbendiner]

Brad, no change if I use the genesis-before hook ... same result.

Johann, if you take a look at http://www.technologix.ca it will show what I am trying to accomplish. The navigation is inside the header, as I want it to be. What I am trying to do is ADD a small section ABOVE the header where I can place a widget with another menu.

Your suggestion to remove the white gap worked. Thank you. But the problem is still there... If you look at the website now you still cant see the widget area at the top. Yet if you increase the zoom enough it will show up with the text = 'hello there' on the right side.

I am quite sure the issue is in the style.css, but I don't know enough code to resolve it.

[Johann Kratzik]

Understood 😉

The header with logo and navigation has position: fixed; and is overlapping the widget area. So the widget area needs position: fixed; as well.

1) Move the .site-header down in style.css but you need to know the desired height of the widget area.
So for example add top: 30px; to .site-header

2) Add those rules to .before-header:

position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;

But the height must match the "top" for .site-header

---

Offering customization work for FREE – Read more

[jbendiner]

Thank you Johann.
Your suggestions solved the problem!

[Johann Kratzik]

Good to hear! If you have no further questions, you can mark the thread "resolved" now.

---

Offering customization work for FREE – Read more

[Author]

Posts