Archived topic
Problems with the page header using GP Premium 1.7 beta rc3
22 replies · Started by Lucas on August 11, 2018
Yes, take a look at this.
https://lucasreiramos.com/gl/ola
I was fixing it the CSS way but I would like you to tell me wether there is a more elegant or included option in GP to accomplish that.
I would like the menu bar to be at the bottom of the page (and if possible, visible, not only when scrolling down). I would also like the site branding to align to the bottom, not to the top. For now, cannot do it without modifying the original header to match the merged header with CSS. I would like to know if GP handles that somehow.
Give this CSS a try:
.header-wrap {
height: 100vh;
}
.header-wrap #site-navigation {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
It looks that it works! Now I have a final problem.
How can I get the site branding to be aligned to the right and the logo aligned to the left, within the contained width, with CSS?
I cannot get to do it with my knowledge of CSS.
Thanks!
You'd need to remove the absolute positioning you added to the logo, then add this:
@media (min-width: 769px) {
.site-logo {
float: left;
}
.site-branding {
float: right;
}
}
Cool! Now just a final question, is it possible to align the site branding and logo to the bottom, instead to be at the top?
Thanks!
This should do it:
.header-wrap .site-header {
position: absolute;
bottom: 60px; /* Height of navigation */
left: 0;
right: 0;
}
Works like a charm! Thank you very much!
You're very welcome :)