[Resolved] Text based logo in Menu Bar

[Dominik]

https://generatepress.com/forums/topic/how-to-create-a-menu-bar-with-logo/

Hi, I’m looking to have a logo in my header that is not an image, but a text based logo, like in the header (GP Premium Customer). Needs to be white font as well (background is dark blue).

However I only found an option for an image based logo.

Thank you!

[Tom]

Hi there,

This topic might help: https://generatepress.com/forums/topic/sitetitle-in-navbar-instead-of-icon/#post-225010

[Dominik]

Hm, sorry Tom – I don’t have the “inside navigation” Hook available and the code does not work in the other hooks (tried with several ones).

I’ve added it with the simple php plugin and it worked. Would also be great if this would be an easy to use option besides the image logo in the navigation design menu. Also would love to have an option for a well styled full search bar in the navigation bar (floating right).

Pretty much like this, but in the primary menu: https://generatepress.com/forums/topic/top-menu-with-search-bar/

[Tom]

Glad you got it working with the code.

Using the title is a little tricky, as the length of the title etc.. really changes what it would look like. I’ll work on it though.

The solution in that topic would work for the primary menu as well, you would just have to replace generate_inside_secondary_navigation with generate_inside_navigation.

[Dominik]

Thanks, looks great (with some right and top padding): https://dotzauerinstitut.de/

However in mobile the search looks weird and steals a lot of the space – what could I do about that? See: http://imgur.com/a/cRG1p

Any way to shrink it to a font awesome search icon or the like and pop up?

[Tom]

You can hide it on mobile:

@media (max-width: 768px) {
    .your-search-class {
        display: none;
    }
}

Then enable the navigation search option, and hide it on desktop:

@media (min-width: 769px) {
    .main-navigation li.search-item {
        display: none;
    }
}

Hope this helps 🙂

[Dominik]

Ah good idea!

Still 2 Problems:

1. The Search button does not allow for instant typing – you manually have to click in the search field before you can type, which can be really annoying esp. the first few times you use it. See in this video: https://cl.ly/1v1R351L463a

2. Also the site title is no longer a link to the Homepage. I could just use in the php code snippet, but the I’d need to reset/compensate for all of the css applying to the link. Is there any smarter solution?

Thank you!

[Tom]

1. Hmm that’s not default behavior – take a look here: http://demo.generatepress.com/

One of your plugins/modifications might be causing this.

2. You’ll need to include the HTML for the link in your custom function.

[Dominik]

Thank you! That did it: https://dotzauerinstitut.de/

[Tom]

Awesome 🙂

[Jenne]

Hey Tom! I’d like to add site title into my navigation bar as well. Tried the method above out by adding it into Code Snippets, but can’t seem to have it work. Mind checking out for me? Thanks!

http://undermywhitecoat.com

[Leo]

Hi Jenne,

Just making sure this is the code you’ve added?
https://generatepress.com/forums/topic/sitetitle-in-navbar-instead-of-icon/#post-225010

Can you also make sure that you click Save Changes and Activate for the snippet?

Let us know.

[Jenne]

Hey Leo – I’m so sorry! I have not been using Code Snippet for some time and I didn’t click the activate button.
So sorry for the trouble! Have a great day ahead!

[Leo]

No worries 🙂 Its an easy one to miss. Have a great day as well!

[Author]

Posts