Remove menu background color and dividers

emilykhawthorne · Member · Dec 27, 2013 at 2:35 am
Copy link

Add topic to favorites
Hello! I am trying to remove the background or “shadow box” around my navigation menu so that it appears that the items are just floating there. I am also looking to remove the divider lines between my menu items. I am new to this and hope that I am using the correct terms.

Thank you!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 27, 2013 at 7:03 pm
Copy link
This gets rid of the box shadow and border line below the submenu items and leaves the simple grey background for the submenu items.
```
.nav ul {
    border: none;
    box-shadow: none;
}

#nav-primary li li, #nav-lower li li {
    border: none;
}
```
emilykhawthorne · Member · Dec 28, 2013 at 1:36 am
Copy link
Thank you! It appears that there are divider lines between each of my social media icons within my menu. Is there a way to remove this?
thesacredpath · Member · Dec 28, 2013 at 1:47 am
Copy link
Ah, now I see them. I had to lighten up the background first. Add the following to get rid of the left/right border lines in the top level menu.
```
#nav-primary li {
    border: none;
}
```
emilykhawthorne · Member · Dec 28, 2013 at 3:57 am
Copy link
Thank you so much!
thesacredpath · Member · Dec 28, 2013 at 3:59 am
Copy link
You are welcome.
emilykhawthorne · Member · Dec 28, 2013 at 4:04 am
Copy link
Is there a way to move my search widget into my menu?
thesacredpath · Member · Dec 28, 2013 at 4:43 am
Copy link
That is quite somewhat difficult on a responsive width theme, but I see you are working on it with the following CSS:
```
#masthead form.searchform {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 999;
}
```
That looks like you are on the right track. You will just have to decide where you want it in relationship to the social icons. and then adjust either the right/left position of the search, or move the social icons to the left to make room for the search.
thesacredpath · Member · Dec 28, 2013 at 4:44 am
Copy link
By the way, nice job on customizing Opti. It is looking awesome.
emilykhawthorne · Member · Dec 28, 2013 at 5:12 am
Copy link
Thank you! It is always a work in progress. I would like the search bar to the left of my social icons. I moved them over but the search bar seems to remain to the right. When I adjust the position of the search, it seems to just disappear. Perhaps I am not adjusting the code correctly? Should I switch the right: 0; to read left: 0; ? But that doesn’t seem to work either.
thesacredpath · Member · Dec 28, 2013 at 6:09 am
Copy link
You should be able to increase the “right” value in #masthead form.searchform to move the search over toward the left. I would start with a right value of about 300px and then adjust as desired.

No items found.