Sticky Navigation with logo and navigation search

Hi David,

Glad you are enjoying GP :)

Someone else mentioned a similar issue in this post: https://generatepress.com/forums/topic/transparent-menu-search/

Can you try the solution Tom provided and see if it works for you?

If not can you provide a link to your site?

Thanks!

Hi Leo,

what can i say - you guys respond as quick as your theme!
next time ill spend a little longer searching your forums, it seems you have it pretty much covered already.

Wasn't expecting that quick a response, ill move it my list of to do's and give it a go!

thanks

David

Not an easy one to find. Was quite surprised that I found it myself haha

Not sure if the solution would work for you either but worth a shot.

If not let us know we will figure something out :)

Well ok. I can see what that does. However. My theme is very black and white.
Its currently in development - coming soon page has no nav bar but it'll give you the gist of what i am faced with.

For this fix to work i could switch the colour out to something more solid but then would need to change the type to white.

Ill get round to setting up a new user so you can get access to the site in case i have any future queries.

OK, i thought i would give this CSS malarky a go:

.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
width: 50%;
}

Leaves the colour and fonts alone and reduces the search menu to half the size which is currently perfect for my requirements! I'll experiment with some other CSS styling when i get a chance.

Thanks for the support.

Now just need to revisit the options for mobile devices doh!

You can apply your custom CSS to desktop only by wrapper it in a media query:

@media (min-width: 769px) {
    /* desktop only CSS in here */
}

Thanks Tom / Leo,

I have adjusted the CSS so the search type is more visible but it might be good if i can change the visibility of the navigation logo.

what selector would i use for the navigation logo?

regards

David

OK i settled for a simple fix with increased opacity and bigger font.

Nav bar no search:

Nav bar empty search - 100% opacity white

Nav bar filled - changed font and size for more visibility

Would still be good to change the logo visibility. =)

Are you wanting the nav logo to be more visible, or less?

preferably a less visible logo when the search bar is up

What about this:

.navigation-search input {
    opacity: .95;
}

Thats great. I can even bump it higher - dont mind the logo not being visible when searching.
Thanks

Problem solved

You're welcome :)