Hello. Some more newbie questions. I’m roughing out a simple layout (using Foundation) which includes a Top Bar, a Header (with a background color selected) and then an Image (using Impact). I can’t figure out why when I drop the three elements into a clean page I’m ending up with space between the Header and the Impact Stack image (see attached). I can add some padding to the Header to fill in this empty area but then my line of text isn’t centered vertically. So I guess my question in two parts is 1) why am I getting this gap? 2) is there any way to manipulate my header text so I can keep it centered in its box?
And as a third question, is there anything I can do to keep the header text aligned with the TopBar Menu site name? If I drop everything into a 1 Column Stack the Site name and the Header text are both responsive (though still not aligned) but then I lose the edge to edge browser look that I’m trying to achieve.
Coming from iWeb and used to WYSIWYG so sorry if this stuff is obvious. Thanks.
The Foundation header adds a bottom margin automatically to keep your Typography correctly spaced.
If you swap it for a HeaderPro stack, you will notice that near the top of the settings is a collapse margins checkbox. This will remove the space in your layout. HeaderPro is fully Foundation compatible and will allow you to use all the normal Foundation Styles plus a lot more besides.
To align the header to the Topbar title (with the topbar set to contained width) you need to do two things.
Firstly, you were nearly there - put the header into a Foundation 1column but apply the background to this column at the very top of the settings. This will apply the background to the full width of the row and not to its site width column content.
The final thing you will need to do is to account for the padding from the TopBar title. By default it has some left and right padding which will push it over slightly.
You could just add the some padding to the header to push it right slightly or, if you want to carry on the alignment down the page, it is easier to just remove the padding from the title area - this will save padding everything else.
If you look in the Code section of the RW settings, you will see that there is a little CSS to do this. This is site wide and will apply to every page.
One more thing Andrew, and this is really picky but I notice that when I really reduce the browser window in size, there’s a moment where the TopBar title jumps out of alignment. I notice that the demo, that you were kind enough to send me, does the same thing. Is this just something I have to live with?
Also, can you explain what exactly that little CSS snippet actually doing? I’ve run my work in progress with and without it and can’t see the difference.
The CSS is simply over riding the default padding on the Top Bar title area with a value of zero so that it perfectly aligns with the column below.
Sorry, I was a bit sloppy and forgot about the situation for small screens. In this case (when the TopBar goes to the mobile menu) we want the padding to be applied as normal to preserve alignment.
We can do this simply by enclosing the above CSS in a media query. This will tell the browser to only apply the code within it under certain conditions.
By basing this on a minimum width, we can tell the CSS to only to take effect above a certain browser width - in this case 640px, the point where the TopBar is displayed as the desktop style menu, thus not affecting the mobile dropdown menu.
Simply replace the code I gave you above for the following an everything will be aligned at all screen sizes.
@media screen and (min-width:640px){
.top-bar .name{
padding: 0!important
}
}
