-
Posts
-
I do not have a menu in the logo area (I added it to the middle of the page with a full-width sub menu instead), but I would like a search bar on the right side of the logo area. To the left of the search bar, I would like the social media icons to appear.
How can I do this? I would also need code to adjust the alignment of the search bar and social media icons once I can get it to appear.Hey Moondreamer21,
Thank you for using Enfold.
Use the “ava_main_header” hook to render a search form inside the main header area.
Example: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
Best regards,
IsmaelThank you! This worked, however the search bar covers the entire width of the site.
How can I set the css of the search bar to be the same as they would if it was used in a normal position anywhere else? And is there a place I can make adjustments to exactly where/how it’s positions, the colors, etc.?Hi,
Can we please check the web site, so we can be able to help you with the results?
Best regards,
BasilisSure, I’ll provide the link to the site in the private content. Please let me know if you need anything else.
Hi,
Thanks for the update.
Use the following css code to adjust the position and width of the search widget.
#top #header .widget_search { width: 200px; position: absolute; right: 50px; top: -20px; }Adjust the values as needed.
Best regards,
IsmaelThank you! Do you have code to change the ‘search’ font that is INSIDE the search box? And how can I change that if I want to make the text all caps or lower case?
Hi,
This thread has been very helpful, I’ve been able to also include the search bar into the header now as a widget, however my problem is I cannot ‘click’ into the box to type , its visible but cannot access it.
CSS I’ve used –
#top #header .widget_search {
width: 200px;
position: absolute;
right: 50px;
top: -35px;
}It was fine before the CSS, however the search box took up almost the entire width of the site, so I had to include the css.
The problem seems to be with the CSS used above, position : absolute, if I change that to ‘relative’ I can click on it but I can’t have the box where I want it.
I also can’t work out how to retain the magnifying glass icon on the right side of the input box when css applied.
Hi fluffyduck,
The nav bar is over it
You might want to increase your header height or move the search to the header meta area.
Best regards,
VictoriaHi,
The styling seems off but the function is working. Did you mean the styling?
Best regards,
Jordan ShannonHi Jordan, I see it’s working now but yes – I’d still like help with styling.
Do you have code to change the ‘search’ font that is INSIDE the search box? And how can I change that if I want to make the text all caps or lower case?Hi,
Add this to quick css:
#s{ color:#000!important; text-transform:uppercase!important; }Best regards,
Jordan ShannonHi Victoria,
Ahh so it is, I can’t increase the size of the header unfortunately as this is where they want the search bar, where it resides now is slightly different to your screenshot as it is aligned with the menu.
That said I thought changing the z-index of it would help, so it sits ‘on top’ but that doesn’t seem to be working or I’m doing it wrong.
Thank you! Can you provide code to change the background color of the search bar when typed in?
And also the color of the backgrounds of the search items that drop down, etc. whether on desktop or mobile – I see some differences between them.Hi Victoria (and anyone following my query in this thread)
I was able to resolve the issue of the nav_header being on top of the search widget in the header by modifying the z-index of the .av_main_nav_header.av_menu_right
I couldn’t put this in the extra css portion within the theme settings, instead it had to go into the style.css in the child theme.
Once this was done, its working as desired.
.av_main_nav_header.av_menu_right #header_main .main_menu-uber {
clear: none;
position: absolute;
z-index: inherit;
line-height: 30px;
height: 100%;
margin: 0;
right: 50px;
}I am still looking for assistance in styling the search drop down on desktop, it seems the logo area settings will style the colors, etc. on mobile, but they aren’t taking effect for me on desktop.
Can you provide code to change the background color of the search bar when typed in?
And also the color of the backgrounds of the search items that drop down.
I’d also like to remove the date.
Thanks!Hi,
To change the background color of the ajax search fro transparent to a color, Try this code in the General Styling > Quick CSS field:.header_color .avia-tt { background-color: purple; }please adjust the color to suit.
To remove the date in the ajax search, please try this code:.ajax_search_response span.ajax_search_excerpt { display: none !important; }To change the color of the ajax search field, Please try this code:
#top .header_color #searchform input[type='text'] { background-color: red !important; }Best regards,
MikeThanks,
The only code that didn’t seem to work was this one for making the drop down background colored instead of transparent:.header_color .avia-tt {
background-color: purple;
}Do you have some other code I could try for that?
Also, is there a way to make the text not all upper-case?
And is there a way to change/adjust the big round white circles/bullets on the left side of each search item that comes down? Like make the circle smaller?Hi,
I corrected the code for the background color, and added a color for the icons in the search results, and removed the upper case results:.header_color .ajax_search_response { background-color: purple !important; } .header_color .ajax_search_image { color: purple !important; } .ajax_search_title { text-transform: none !important; }feel free to adjust the color to suit.
Best regards,
MikeOne more thing – is there some code to adjust the hover effect on each search item that drops down?
I see it darkens a bit when moused over, but just barely.Hi,
Try this code in the General Styling > Quick CSS field:#top div .ajax_search_entry:hover { background-color: rgba(0,0,0,0) !important; }Please clear your browser cache and check.
Best regards,
Mike
- The topic ‘How to Add Search Bar to Logo Area’ is closed to new replies.