- This topic has 7 replies, 2 voices, and was last updated 6 years, 9 months ago by Leo.
-
AuthorPosts
-
July 2, 2017 at 8:59 am #342874Randy
Hi Everyone,
Seems like its always the header, the first thing a client sees, is the thing that always needs the tweaking to get it exactly the way they want it. 🙂
In this case it is the logo right justified and the tagline left justified with both of them aligned on the bottom. Like this …
………………………………………. | LOGO Graphic |
………………………………………. | LOGO Graphic |
………………………………………. | LOGO Graphic |
Site Tagline ………………….. | LOGO Graphic |– I hid the site-description.
– I set header alignment to right – this keeps the logo on the right.I’m having trouble getting the tagline on to the bottom left of the header area.
I’ve found and attempted to add some Additioinal CSS to do this, but it isn’t doing the trick.
@media (min-width:769px) {
.site-branding {
display: inline-block;
}.site-description{
float: bottom;
margin-right: 20px;
}
}I know just enough CSS to break things. There are likely several ways to accomplish what I want, I’m just looking for one.
If someone could point me in the right direction that would be greatly appreciated.
Thanks,
Randy (aka Crane358)July 2, 2017 at 9:10 am #342885LeoStaffCustomer SupportHi there,
So you are wanting to add 4 logos on the right side and tagline on the left?
July 2, 2017 at 10:05 am #342926RandySorry, no. Just 1 logo graphic. That was my lame attempt at doing an ascii-text representation of what I would like.
I guess the proper way to describe it is that I want the tagline bottom left justified and the logo bottom right justified. Make sense?
Here’s an image I stuck on my wwebsite to help.
Regards,
Randy (aka Crane358)July 2, 2017 at 10:25 am #342934LeoStaffCustomer SupportAhh I see. Let’s try to use the before header content hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/Add something like this:
<div class="grid-50 header-left"> <div class="site-branding"> <p class="site-description">Site description</p> </div> </div> <div class="grid-50 header-right"> <div class="site-logo"> <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home"> <img class="header-image" src="URL TO YOUR IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME"> </a> </div> </div>
Also need to remove the logo and description from Site Identity
July 2, 2017 at 1:17 pm #343025RandyThanks so much for your help Leo.
It’s very close except the description is aligned at the top instead of the bottom.
I blasted together a quick WP site to test …
http://greatbear.ca/beta.greatbear.ca/I guess I need some CSS to tell it to go to align bottom. Maybe this? (I’m pretty rusty on my CSS).
vertical-align: bottom;
Regards,
Randy (aka Crane358)July 2, 2017 at 1:27 pm #343033LeoStaffCustomer SupportAhh yeah forgot to give you the CSS. Changing vertical position is always tricky.
@media (min-width:769px) { .header-left { padding-top: 200px; } .header-right { text-align: right; } }
July 2, 2017 at 3:20 pm #343061RandyThanks again Leo. That works.
Eventually I would like to find something that it is a bit more responsive in that it avoids a hard coded padding but this will get me going for now.
Regards,
Randy (aka Crane358)July 2, 2017 at 6:17 pm #343120LeoStaffCustomer SupportNo problem!
-
AuthorPosts
- You must be logged in to reply to this topic.