Archived topic
GP hook instead of site header
8 replies · Started by Jamal on March 4, 2017
Hi
I would like to have site title in 2 different languages one beside the other on desktop and tablet (centered) and on mobile have them one above the other. I have tried several things,the nearest i came was using the normal site title and a header widget but now i would like to give GP hooks a try. This is the code i have now
<div class="grid-container grid-parent">
<div class="inside-header grid-parent">
<div class="grid-50">
<div class="site-branding">
<p class="main-title" itemprop="headline"><a href="http://ermias.kebhee.se/" rel="home">Ermias Ekube</a></p>
</div>
</div>
<div class="grid-50">
<span style="font-family: Courier New;font-size: 30px;font-family: 'Droid Sans Ethiopic', sans-serif;">ኤርሚያስ ዑቕበ</span>
</div>
</div>
</div>End result to be something like this
http://imgur.com/TV2kQYm
Hi Jamal,
Sorry what's the current problem?
Is it that they are not side by side? If so try this CSS?
.main-title {
text-align: right;
}You can add a couple classes for the grid to get the responsive layout you want as well:
<div class="grid-50 tablet-grid-50 mobile-grid-100">
Let me know if this answers the question :)
I'm kinda having a mental block and thought there is an easier way by using some built in options. When i tried text-align: right i then realized i have to align it on mobile as well and i was not getting it to sit perfectly in the middle.
How can i make the first grid behave like when the site header is aligned center? Thanks
hmm maybe try wrapping the entire thing in the site-branding class then you should be able to use the customizer to center it?
Then add a span to the second language part and give it a special class with CSS display: block targeted at mobile?
Sorry I can't actually try it right now as I'm waiting at the chairlift :P
Or you can try to build a header for desktop/tablet and one for mobile and just hide one or the other using hide-on-desktop, hide-on-tablet and hide-on-mobile classes?
What about this..
1. Set the header alignment to center.
2. Add this into the before header content hook:
<p class="site-title">First title</p>
<p class="site-title">Second title</p>Then add this CSS:
@media (min-width: 769px) {
.site-title {
display: inline-block;
vertical-align: middle;
}
}Excellent support as alway, thanks guys ! Tom, your way was easier as the custom styling needed was minimal.
Leo, remember to take a complete break sometimes, you deserve it :)
No breaks allowed, Leo! ;)
haha thanks Jamal. Pretty sure I get more breaks than most people out there.
At that moment there was literally nothing better to do than looking at GP forum...sadly? lol
Tom is the one who needs a break...
