Sight theme customize navigation menu borders/appearance

akosarin · Member · Apr 19, 2013 at 7:53 am
Copy link

Add topic to favorites
Hello! I have paid for the CSS upgrade and the blog I need help with is http://www.mylifeurge.com. I am currently using the Sight theme and have not made any custom changes to the navigation appearance.

I would like to remove the dividers in my navigation menu and add a bottom border, I also like how the lines don’t to go all the way to end of the page, so it looks more like, this http://vmacandcheese.com/

I also want to change the hover over to highlight just the word instead of block and I would like to make the hover font this color #9ee5df.

Can anyone help me?

Thank you,
Amanda

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 19, 2013 at 4:04 pm
Copy link
It appears like you have gotten most of this taken care of. If not, let us know. This will get rid of the background color on hover for you.
```
.main-navigation ul ul, .main-navigation ul li:hover {
background: none;
}
```
akosarin · Member · Apr 19, 2013 at 5:40 pm
Copy link
thank you for responding! I was determined to figure it out. I am almost there. I am still trying to figure out how to add a margin to the left and right side of the navigation bar, so the lines above and below the nav buttons don’t go all the way to the end, so it looks more like this… http://vmacandcheese.com/

as for the code for the hover link. the one you gave did the trick to remove the background. but how do I change the color of the text when you hover over it to be #9ee5df and remove the underline for the text. Basically when you roll over the text, I just want it to turn a color and have no underline.

thank you thesacredpath!
thesacredpath · Member · Apr 19, 2013 at 5:50 pm
Copy link
See what you think with this. You already have .main-navigation in your custom CSS, so add the declarations I have below for that rule and then add the second bit.
```
.main-navigation {
float: none;
margin-left: auto;
margin-right: auto;
width: 95%;
}

.main-navigation li a {
margin-left: 0;
}
```
akosarin · Member · Apr 19, 2013 at 5:57 pm
Copy link
this was my original code, to have the border width thin. do I just add the code you gave to what I previously had? because when I did, it took away the bottom line and made the top line thick, so I must have done something wrong? Essentially, I like your navigation bar, with the thin lines and when you roll over the text it changes color, with no underline. here is the code I already have. not sure if it is right, i am a novice! thanks for your speedy reply!

.main-navigation {
border-bottom: solid;
border-color: #e5e5e5;
border-width: 1px;
}

.main-navigation li {
border: none;
}

.main-navigation li {
text-indent: 45px;
}
thesacredpath · Member · Apr 19, 2013 at 6:35 pm
Copy link
Add the following declarations to your existing .main-navigation rule instead of replacing it:
```
float: none;
margin-left: auto;
margin-right: auto;
width: 95%;
```
Then add this new rule to your CSS:
```
.main-navigation li a {
margin-left: 0;
}
```
akosarin · Member · Apr 19, 2013 at 7:28 pm
Copy link
so this is what I have. not sure added it how you instructed. with the code below, I no longer have the bottom border to my navigation, and the width of the border is larger than 1px. can you see in my code where I made a mistake?

thank you for your patience.

.main-navigation {
border-bottom: solid;
border-color: #e5e5e5;
border-width: 1px;
float: none;
margin-left: auto;
margin-right: auto;
width: 95%;
}

.main-navigation li a {
margin-left: 0;
}

.main-navigation li {
border: none;
}

.main-navigation li {
text-indent: 45px;
}
thesacredpath · Member · Apr 19, 2013 at 7:46 pm
Copy link
Hmmm, it is the float: none; that is causing the bottom border to disappear. Add the following, which is another way to get the same effect. Remove the other stuff I told you to add to .main-navigation.
```
.main-navigation ul {
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
```
akosarin · Member · Apr 19, 2013 at 7:58 pm
Copy link
I tried to add the code you just gave me, to the code I already have and removed the other stuff you told me to add. this doesn’t seem to be working for me, it is just moving the text around slightly. the other code was closer to the effect i was looking for as this one doesn’t put margins on the right and left of the borders. any suggestions?

also, I still haven’t tackled the issue with the hover links either.

thanks thesacredpath for your help, doing this alone will make me cross eyed from staring at the screen for days on end.
thesacredpath · Member · Apr 19, 2013 at 9:06 pm
Copy link
Hmmm, it puts margins on left and right for me. What browser are you using?
akosarin · Member · Apr 19, 2013 at 9:09 pm
Copy link
this is what the code looks like with the update you suggested. I am in firefox 20.0, is that what you are using? also can you check the code below to see if I added it correctly. thank you.

.main-navigation {
border-bottom: solid;
border-color: #e5e5e5;
border-width: 1px;
}
.main-navigation ul {
margin-left: auto;
margin-right: auto;
width: 95%;
}
.main-navigation li {
border: none;
}
.main-navigation li {
text-indent: 45px;
}
thesacredpath · Member · Apr 19, 2013 at 9:44 pm
Copy link
Whew! I’m sorry for the runabout I’ve put you through on this. Firebug sometimes fails me and then was one of those times. :(

Replace .main-navigation in your CSS with this and (fingers crossed) it should do what you are wanting.
```
.main-navigation {
    margin-left: 2%;
    margin-right: 2%;
    width: 96%;
}
```
akosarin · Member · Apr 19, 2013 at 9:54 pm
Copy link
Wohoo!! that was the fix! that bugger was getting to me, THANK YOU!

I would still like to tackle the link hover color in the navigation bar. I want the color of the text to change to #9ee5df when you hover over it and remove the underline from the text, with no background color. Basically when you roll over the text, I just want too see the text turn a color and have no underline. (currently when you roll over it, there is a black box and the text turns white)

thanks a million…
akosarin · Member · Apr 19, 2013 at 10:04 pm
Copy link
also, if I wanted to move the top border down an a little and bottom border up a little, so they are a bit closer to the text, is there coding for that? would that be altering the padding?

thank you thesacredpath!

thesacredpath · Member · Apr 19, 2013 at 10:05 pm

Hover color for nav links with no underline:

.main-navigation li:hover > a, .main-navigation ul ul *:hover > a, .main-navigation ul ul a:hover {
color: #9ee5df !important;
text-decoration: none;
}

Remove background hover (I’d given this above but we got sidetracked):

.main-navigation ul ul, .main-navigation ul li:hover {
background: none;
}

akosarin · Member · Apr 19, 2013 at 10:19 pm
Copy link
that worked too!! thank you. the navigation bar is finally coming together. will this coding be good if i have a drop down menu, or will i need to add more code?

also, not sure if you saw my last question.

if I wanted to move the top border down a little and the bottom border up a little, so they are a bit closer to the text, is there coding for that? would that be altering the padding?

thank you the sacredpath
thesacredpath · Member · Apr 20, 2013 at 12:17 am
Copy link
Submenus will require some additional code:

`.main-navigation ul ul {
background: none;
}

.main-navigation ul ul a {
color: #9ee5df;
}

The topic ‘Sight theme customize navigation menu borders/appearance’ is closed to new replies.

WordPress.com forums

Sight theme customize navigation menu borders/appearance