Remove menu background color and dividers
-
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)
-
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; } -
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?
-
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; } -
-
-
-
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.
-
-
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.
- The topic ‘Remove menu background color and dividers’ is closed to new replies.