My header row seems to have padding on the left and right as shown by the red bars in the attached pic. How do I adjust this so that header content aligns with other content. Stuff seems a bit squished together and think extra space would help.
Also, I’ve added some green lines to the pic. These represent the approx width of the old theme I’m switching from. If I wanted to stretch content out to here, how would I do so?
Thanks!
And the logo and menu items do not appear to be aligned. It looks like center of the logo is aligned to the bottom of the menu items.
Also, when I scroll down a lot of the bottom padding disappears and the header logo is really close to the site content (menu padding still looks fine as it’s not aligned with logo).
Could you tell me how I can get these items aligned (either same middle or bottom) and to increase padding on scroll (changing padding under Header Layout only seems to change the pre-scroll padding)?
Hey Thomas,
Can you share the URL of the site in question so we can take a look?
Ben
Hey Ben! It’s austinsurance.co
Thanks!
Hey Thomas,
So the header and the fixed row have a different width, that’s the reason they’re not aligned, and each one can be changed separately. For the theme width(header/footer) it will be available once version 1.5 of the theme is released probably a week from now if nothing major comes up. We’ve actually released a beta version for you to try. Check out the blog entry below for more info.
http://forum.wpbeaverbuilder.com/version-1-5-of-the-beaver-builder-theme-is-now-in-beta/
You can change the width of the fixed row under Tools > Global Settings > Max Width.
Re the issues on the fixed menu, we can adjust those using custom CSS. Try adding the snippets below and see if it’s what you’re looking for.
/* Add bottom padding to the fixed header */
.fl-page .fl-page-header-fixed .fl-page-header-wrap > .container {
padding-bottom: 15px;
}
/* Change vertical alignment of the fixed header elements */
.fl-page-nav-right.fl-page-header-fixed .fl-page-header-row > div {
vertical-align: bottom;
}
Let us know how it goes! 
Ben
Ben, as always, thanks for the speedy reply!
Glad to know the header width feature is coming. I’m not super tech savvy and not in a huge rush so I’ll just wait for the official release to adjust that.
The first code snippet is working - now the bottom padding when I scroll is a little beefier. Thanks!
But the second CSS snippet does not seem to be working. It looks like it’s supposed to move the navigation menu items down to align with the bottom border of the icon (if I’m reading it correctly). But neither the icon nor nav items have moved. Any ideas why?
Hey Thomas,
Can you remove that second set of code and this instead?
/* Make the menu align to the bottom of the logo */
@media (min-width: 992px) {
.fl-page-nav .navbar-nav > li > a {
padding: 30px 15px 0px;
}
.fl-page-nav-search {
top: 15px;
}
}
Ben
Ben, that moves search icon down but the nav items stay in the same place as shown below
Hey Thomas,
It seems the greater than symbols were converted to entities >. Can you delete those characters there and re-add them manually?
Ben
Ben, I copied and pasted your code snippet as text which I believe should take care of the entity issue. And it fixed the alignment of the pre-scroll view as shown below:
Post scroll the alignment is still off though. And search icon disappears:
Hi Thomas,
Can you try the following CSS, please.
@media (min-width: 992px) {
.fl-page-nav-right.fl-page-header-fixed .fl-page-nav-wrap .navbar-nav > li > a, .fl-page-header-fixed .fl-page-nav-wrap .navbar-nav > li > a {
padding: 30px 15px 0;
}
}
Also, the search isn’t available on the stick on scroll nav.
Thanks,
Danny
Ah, sorry about that, Thomas. I initially thought you only wanted to align the items in the primary header, not on the fixed header. Danny’s code above should work!
Ben
Thanks Bend and Danny! Working now
Awesome! And thanks for taking the time to inform us. Enjoy!
Ben