GP hook instead of site header

[Jamal]

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

View post on imgur.com

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jamal]

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

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Leo]

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 😛

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jamal]

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 🙂

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

No breaks allowed, Leo! 😉

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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…

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts