- This topic has 8 replies, 3 voices, and was last updated 4 years ago by
Leo.
-
AuthorPosts
-
March 4, 2017 at 3:19 am #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
Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.
GeneratePress 1.3.44GP Premium 1.2.94March 4, 2017 at 6:36 am #286940Leo
StaffCustomer SupportHi 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/March 4, 2017 at 7:01 am #286955Jamal
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.
March 4, 2017 at 7:09 am #286958Leo
StaffCustomer Supporthmm 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 CSSdisplay: 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/March 4, 2017 at 7:13 am #286963Leo
StaffCustomer SupportOr 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
andhide-on-mobile
classes?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 4, 2017 at 10:25 am #287050Tom
Lead DeveloperLead DeveloperWhat 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-developmentMarch 5, 2017 at 10:35 am #287447Jamal
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.
March 5, 2017 at 10:38 am #287450Tom
Lead DeveloperLead DeveloperNo breaks allowed, Leo! 😉
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 5, 2017 at 12:35 pm #287495Leo
StaffCustomer Supporthaha 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? lolTom is the one who needs a break…
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.