[Resolved] GP hook instead of site header

Home Forums Support GP hook instead of site header

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #286895
    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
    #286940
    Leo
    Staff
    Customer Support

    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 🙂

    #286955
    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.

    #286958
    Leo
    Staff
    Customer Support

    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 😛

    #286963
    Leo
    Staff
    Customer Support

    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?

    #287050
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #287447
    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.

    #287450
    Tom
    Lead Developer
    Lead Developer
    #287495
    Leo
    Staff
    Customer Support

    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…

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.