Search Widget Customization

kratimishra · Member · Jan 23, 2016 at 3:34 pm
Copy link

Add topic to favorites
Hi, I needed help with the search bar widget in Adelle. I do not want it to display in the side bar. I want to place it over or under the navigation menu.
Like this blog here http://stylebyemilyhenderson.com/
Is it possible to do that?
If not then, I only want to remove the Search text box and replace it with a typical Search Icon.
Is it also possible for me to increase the navigation menu length beyond the content area and make it as wide as the site, like in the blog above?
Blog concerned – http://homedesignwithstyle.com/

The blog I need help with is: (visible only to logged in users)
zakiruk · Member · Jan 23, 2016 at 3:48 pm
Copy link
to increase space between menu item you need to use css. See css option on your theme.
zakiruk · Member · Jan 23, 2016 at 3:49 pm
Copy link
To change search you need to click customize under themes.
thesacredpath · Member · Jan 27, 2016 at 1:06 am
Copy link
On the search widget, due to the way Adelle is designed, I would suggest putting it at the bottom right of your header area above your menu. With it here, it doesn’t interfere with any of the other elements in the header on narrower screens/windows.
```
#search-7 {
    position: absolute;
    top: 110px;
    border-bottom: none;
    right: 0;
}
#search-7 .widget-title {
    display: none;
}
```
thesacredpath · Member · Jan 27, 2016 at 1:15 am
Copy link
Oops, on the above, also add a position: relative; declaration to your .site rule so it looks like this.
```
.site {
    max-width: 64.95em;
    position: relative;
}
```
On the menu, currently the space for it is out to the ends of the red top and bottom border lines. There is a tiny bit of left margin on the ul element of the menu, and we can remove that with the following.
```
#site-navigation .menu-main-container, #site-navigation .menu {
    margin-left: 0;
}
```
The header elements are within the #page parent div, which sets the overall width for the entire content area, so it can be problematic to extend that out past that #page parent div and not have things go awry on narrower screens/windows.
kratimishra · Member · Jan 28, 2016 at 6:43 pm
Copy link
Thanks it worked!!!
One more thing, I want to remove the ‘Search’ box and replace it with a typical Search Icon. Is that possible to customize?
thesacredpath · Member · Jan 28, 2016 at 9:30 pm
Copy link
You are welcome.

One more thing, I want to remove the ‘Search’ box and replace it with a typical Search Icon. Is that possible to customize?

That would require code that is not allowed here for security reasons (Javascript).
kratimishra · Member · Jan 29, 2016 at 1:56 pm
Copy link
That’s okay. You were a big help.
thesacredpath · Member · Jan 29, 2016 at 7:05 pm
Copy link
Let us know if you have more questions or problems. :)

No items found.