Tob Bar Layout, Foundation, Reactor Puzzle

[martcol]

I am using Reactor Theme which is built on Foundation 4. I like them both.

I enabled a TopBar in my theme and found that the site name in the left part kept tumbling out of the container into the header. To try and identify the problem I compared with the theme demo and the only thing different is it uses an h1 where on my site it has a p element.

This is my(development) site: martcol.co.uk/karban
This is the Reactor demo: http://demo.awtheme.com/reactor/

My fix was to add this:

.top-bar .name p a {
display: inline;
}

Another option would be:

.top-bar .name p a {
width: auto;
}

I would be happy with either of those alternatives but here is my question which admittedly is based on a healthy measure of ignorance, and is not mission critical:

Why do I need to override display: block; (or width: 50%;) on that anchor? Why is my child theme behaving differently to the demo site?

Thanks

[paulob]

The reactor site uses width:auto (as Ed pointed out above) but only uses this for the wider screen versions.

When the window is closed a media query clicks in and removes the main navigation from view and sets a menu icon on the right and then the logo on the left set to width:50% so each occupy half the width of the smaller screen.

[martcol]

Thanks for looking.

Martin

[Author]

Posts