[Resolved] Add custom text to right side of top logo

[Patrik]

Hi,
is it possible to add “text” in the top menu to right of my logo?
It would be great to have it in text so i can edit to different lanugages.
Or even change it from timme to time? 🙂

Printscreen: https://www.dropbox.com/s/aewj1rr4z8okaxw/gptext.jpg?dl=0

[Leo]

Hi there,

Try adding it with a header widget first then we can provide the CSS to position it after:
https://docs.generatepress.com/article/header-widget/

Let me know 🙂

[Patrik]

Many Thanks Leo,
ill do it tomorrow and get back to you 🙂
00:30 here in Sweden so a bit late.

Take care and get back to you tomorrow!

[Leo]

Sounds good let me know 🙂

[Patrik]

Hi Leo,
Sorry for late reply 🙂

Okej so ive added the widget and almost happy.
But now it seems i have 2 challenges.

Question 1
I want to lower the text in the widget to match a certain aligment, but when using margin-top it also expands the whole “head” area creates a bit of gap. So is it possible to have the alignment in the printscreen but not affecting the height of the head?

Printscreen shared on dropbox: https://www.dropbox.com/s/54x2g9z1idhtjtn/alignment%20header%20widget.jpg?dl=0

Question 2
Is it possible to make this widget show like this on mobiles?
Check printscreen on dropbox: https://www.dropbox.com/s/xtldxzxoco629n5/alignment%20header%20widget%20mobile.jpg?dl=0

the address to this page is the one i wrote but add: https://staging.myadress.se

Many thanks 🙂

[Leo]

Just checked the site and not seeing a header widget added.

Can you also make sure this is done?
https://www.screencast.com/t/zHsAmtF7x

Thanks!

[Patrik]

Hi Leo,
Thats weird:
Firefox: https://prnt.sc/s4vi3c (logged into wordpress)

Chrome: https://prnt.sc/s4vj1s (incognito / visitor view)

[Leo]

Can you edit the original topic and make sure the URL is correct?

[Patrik]

Sorry, didnt knew i could to that 🙁
Just created the staging yesterday.

[Leo]

Remove your own CSS and try this:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }
    .header-widget {
        order: 2;
    }
    .header-widget p {
        margin-bottom: 0;
    }
    .site-logo {
        margin-right: 100px;
    }
}

Let me know if this works for desktop. I can provide the code for mobile after 🙂

[Patrik]

Many thanks Leo,
But one question? What command can i add to your css to play around with placement.
Will check with customer tomorrow about placement, but want to show this and maybe like screenshot here: https://prnt.sc/s4xjl9

You can see that im trying to mark “center” there 🙂
Many thanks again!

[Leo]

Missed a bit of CSS before. The .site-logo is what you’d want to adjust:
https://generatepress.com/forums/topic/add-custom-text-to-right-side-of-top-logo/#post-1252281

[Author]

Posts