- This topic has 16 replies, 3 voices, and was last updated 6 years, 11 months ago by Tom.
-
AuthorPosts
-
April 12, 2017 at 2:18 pm #305174DavidStaffCustomer Support
Firstly, great theme and great support.
I am using sticky navigation with nav logo and the nav search. All of which are awesome.
However the nav search field covers the entire nav bar, and as it is transparent the logo still shows through making it difficult to read what is typed into the search.Is there any way to make the search bar shorter, appear below the nav bar or non transparent? If there is anything simple that can be applied would be much appreciated. I so dont want to have to reduce the use of these great features.
thanks
David
April 12, 2017 at 2:25 pm #305182LeoStaffCustomer SupportHi 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!
April 12, 2017 at 2:34 pm #305183DavidStaffCustomer SupportHi 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
April 12, 2017 at 2:37 pm #305184LeoStaffCustomer SupportNot 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 π
April 12, 2017 at 2:47 pm #305191DavidStaffCustomer SupportWell 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.
April 12, 2017 at 3:00 pm #305201DavidStaffCustomer SupportOK, 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.
April 12, 2017 at 3:02 pm #305202DavidStaffCustomer SupportNow just need to revisit the options for mobile devices doh!
April 12, 2017 at 3:53 pm #305210TomLead DeveloperLead DeveloperYou can apply your custom CSS to desktop only by wrapper it in a media query:
@media (min-width: 769px) { /* desktop only CSS in here */ }
April 12, 2017 at 4:10 pm #305218DavidStaffCustomer SupportThanks 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
April 12, 2017 at 4:30 pm #305223DavidStaffCustomer SupportOK 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. =)
April 12, 2017 at 7:18 pm #305258TomLead DeveloperLead DeveloperAre you wanting the nav logo to be more visible, or less?
April 13, 2017 at 4:09 am #305363DavidStaffCustomer Supportpreferably a less visible logo when the search bar is up
April 13, 2017 at 10:48 am #305524TomLead DeveloperLead DeveloperWhat about this:
.navigation-search input { opacity: .95; }
April 13, 2017 at 11:03 am #305533DavidStaffCustomer SupportThats great. I can even bump it higher – dont mind the logo not being visible when searching.
ThanksProblem solved
April 13, 2017 at 11:04 am #305534TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.