How to create a top bar in parallax pro?

[harryagamez]

Hello my friends.

I need a little help with something:

I am building a website with Parallax Pro and I need a top bar widget area. I've managed to create it using the hook 'genesis_before_header' and it works, but I am having a little problem with the CSS.

The problem is that the text widget doesnt show correctly. Sometimes there are gaps between the header and the top-bar. Sometimes the wordpress admin bar hides the top bar widget area and mess up with the position of the header and the top bar widget.

Can anyone help me a little bit?

The website is: http://fermactelecomunicaciones.com/

http://fermactelecomunicaciones.com/

[CleanPageDom]

Hi Harry

I believe it is because the .site-header has position: fixed; - so it is covering up your .top-bar.widget-area.

There are a number of ways around it, depending on how you want the header/nav to behave (ie if you are happy to leave it at the top or if you want it to follow you down the screen).

One solution may be to add this to .top-bar.widget-area:

position: fixed;
width: 100%;
z-index: 1001;

Then add this to .site-header:
border-top: 38px solid #fff; /*The 38px is the height of your top bar*/

You might also need to adjust .parallax-home .site-inner { margin-top: XXpx; } in order to get the slider to display fully. This might have a knock-on effect on your inner pages, which could probably be solved with some more margin/padding to .site-inner.

With this solution, the top bar follows you down the page like the header.

Thanks
Dom

---

Let’s build a website together…

[harryagamez]

Thank you very much. It worked perfect. I would have never thought in something like this. Nice trick!

[Author]

Posts