The search of the widget appears differently than the icon.
You need to enable it in Theme Options> Topbar Settings.
-Kevin
Hi Kevin,
I enabled the widget and saw the search box appear on the left side which is great; however, the navigation menus and my logo was pushed to the center, which overlapped the site name. How do I avoid this?
I’m not seeing the search in your topbar. Have you since removed it?
-Kevin
I just re-enabled it so you can see the issue.
Firstly, I suggest removing the title from the widget, since the search text is within the search bar itself, it seems a bit redundant. if you’d like both the title and the text then I’ll try to get you some CSS to straighten things out, but it will likely be much easier without the title.
-Kevin
The Search text was already removed. My greater concern is on the desktop view, where the navigation menus and my logo which is now pushed to the center, overlapping the site name.
Sorry about that, I hadn’t refreshed the page to see that.
Try adding this CSS to Theme Options> Custom CSS and let me know if it works for you:
div#topbar {
height: 45px;
}
-Kevin
Perfect thanks. How do I move the Search bar to the right instead, above the navigation menus?
If I want to adjust the height of the Topbar, I can just change your code “45”, correct?
Theme Options> Topbar Settings> Topbar Layout Switch.
Yes, changing that px value will change the height of the topbar.
-Kevin
Okay just made the adjustment, but how can I move the Search box further to the right above the navigation menu? Currently it is dead center.
Also, what shade of white is the header, so that I can have the Topbar match the header color? The homepage looks fine for this since the header color is the same white, but for the other pages, the white is a different shade.
Here is some CSS for that:
form#searchform {
float: right;
}
#F9F9F9 should match the color of the header on other pages. Are you wanting that to only effect the pages that are not the home page?
-Kevin
Yes, all pages other than the homepage. How do I change the color?
To do this, I suggest setting the color to #F9F9F9 in Theme Options> Advanced Styling.
Then, add this CSS for the home page:
.home div#topbar {
background-color: #ffffff;
}
Let me know how this works for you!
-Kevin
