main nav bar

Tagged: nav bar button-colors

This topic has 12 replies, 2 voices, and was last updated 8 years, 7 months ago by tjd.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
August 28, 2015 at 2:04 am #16319
tjd
Customer
Hi,

Ok, so I need a bit of advice re: my main, below the HEADER, nav bar. At one point a few years ago, I received some info, maybe from Wes, about changing the color of the “spacing” between the buttons on the nav bar. I keep a journal of sorts but it doesn’t have that info stored. So, the other day I changed the nav bar color from #000 to a dk red and now I have #000 lines around the buttons. Looks kinda ugly on the Mobile version. So where in the CSS can I change the color to match the new dk red? Thank you, thank you.

also, I’m gonna go out on a limb here and ask: When I look at the CSS of the site Navigation, it’s clear that nav & menu are 2 different things, but I just can’t seem to find the difference. What is it…please? Thanx, Tom
August 28, 2015 at 8:55 pm #16321
Andykev
Customer
Do you have a link to your site so we can see what’s up?

The CSS for Legacy menu begins about line 1382 thru 1603. There are sections for primary, secondary..etc. navigation.
August 28, 2015 at 10:53 pm #16323
tjd
Customer
Hi Andykev,

Thanx for your interest. Sure here’s a link:
tomjdolan.com

When I first began this website journey, I really knew nothing about it. Finally discovered I could achieve most of the desired results thru CSS. Even recorded the changes I made so I could revert them if necessary, which often was the case. Apparently I didn’t record that change. Structurally, I’ve left the site alone for quite awhile, but every now and then I like to “adjust” something. Any suggestions always Welcome!
August 28, 2015 at 11:09 pm #16324
Andykev
Customer
```
#nav {
	background-color: #770113;
    	background-position: center top;	
	background-repeat: repeat-x;
	clear: both;
	font-family: arial, serif;
	font-color: #fff;	
	margin: 0 auto;
	overflow: hidden;
	width: auto;
    border-bottom: none;
    border-top: 1px solid #fff; 	
}
```
line 331 of your CSS the bottom line border-top: 1px solid #fff;

change it to solid #770113

That makes it match. You could do black or another color. Hope this works.
August 29, 2015 at 6:40 am #16327
tjd
Customer
Hi Andykev,

I appreciate your interest. The line of code you reference is not the issue in this case. You are referring to the Top Border of the Nav Bar which is white and I’m happy with that. I am talking about the vertical black lines between the page choices on the Nav bar: Home – Blog – etc. They are black and produce a “button” appearance on the Nav bar and that look is more pronounced on the Mobile site. Anyway,

Thanx for your interest. BTW, how exactly do you know the Line is number 331? How do you locate that line number…where is it?

Thank you again Andykev, Tom
August 29, 2015 at 2:44 pm #16330
Andykev
Customer
Tom,

I just checked your website on my Iphone and the menu items “highlight” to red when selected. I am not seeing any black lines between the box, just probably a 1px outline aroung the button.

Your CSS is in the “style.css” on your theme. You go to the wordpress dashboard under appearance-editor and that takes you to the files of your theme. Careful! make a copy before changing anything.

Also, open your browser (Chrome) and right click the page. At the bottom is “inspect element”. Powerful tool to look at where things are, and what code is affecting the part of your website in question. Firefox does the same (it’s easier for me).
August 29, 2015 at 9:55 pm #16340
tjd
Customer
Hello Andykev,

The black button outline is what I wanted to eliminate. Late last nite while poking around the CSS code I discovered another element that I could change from black to dk red. I changed it and it worked. The element, if that’s what it’s called, is: .menu li {

I may even further darken the Red…but anyway thanx for all your interest & suggestions. And, btw I also use Firefox as a backup to Safari. I’ll checkout their inspector again. I’ve looked at it but never thought I needed to know about it… I’ll look again.

So, from Tokyo to wherever, Thanx Andykev:-), Tom
August 29, 2015 at 10:07 pm #16341
Andykev
Customer
Tom,
Sounds great! Today I looked and saw the dark (almost burgundy) red menu bar with lighter red highlight menu items (hover).

Yes that is where to look. If you use the “inspect element” you can “double click” the area on the right hand box of the inspection panel and actually change the settings, fonts, colors..to see what it looks like. Refreshing the page resets it back to what is actually on your live site. It’s an easy to quickly spot where a section of CSS code is for the item in question is.

Cheers from SF Bay Area to Tokyo!
September 24, 2015 at 5:17 am #16448
tjd
Customer
Hi again Andy,

I returned to the Forums today with a related question to our thread and discovered it’s still open. So Maybe you get this and maybe you don’t but I’ll ask anyway.

After the last go-round with the nav bar, I decided to make a major visual change, which you can see if you visit. I wanted to simplify the appearance and also add a bit of color besides the Red-Black-Grey scheme. anyway, I was wondering:

The Green highlighted Pages on the Nav Bar are simple looking rectangles…a bit rough for my taste. So I’m wondering, can I, without creating a migraine, add a radius of some sort to round the corners of the Green rectangles when they’re selected?? Possible??

tomjdolan.com
September 24, 2015 at 3:34 pm #16454
Andykev
Customer
Tom.

Check hou this webpage which is a “rounded corner” generator. You can play with the settings to achieve the look you want, and it shows the proper code used in your .CSS to make it happen. Top link is rounded corners for any box..the botton is for designing menu’s.

http://www.cssportal.com/css3-rounded-corner/

http://www.cssportal.com/css-menu-generator/
September 24, 2015 at 3:49 pm #16455
Andykev
Customer
Tom, I tried this on your menu. It’s a double border with very rounded corners. Menu is regular color, but the drop down selections are green. It’s just an example to try to show what is possible. In fact, you may play around with it and pick something different from what you have now.
```
.menu .current-menu-item a {  
	border-radius: 25px; 
-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
border: 5px double #800000;
}
```
Its around line 409 of your CSS. Enjoy!!
September 25, 2015 at 1:05 pm #16457
Andykev
Customer
Tom, put this in place, it does not add any border, just rounds your corners on the existing menu.
That is what you were looking for.
```
.menu .current-menu-item a {  
	background: #24FF24;
    color: #fff;
	boder-radius: 25px,
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
}
```
September 26, 2015 at 10:59 am #16459
tjd
Customer
Hi Andy,

Well I attempted to Comment yesterday but couldn’t get an open Comment form. Just as well because your 2nd set of Code worked very well. Adjusted the Radius down to 5 and got the result I was looking for. Thank you so very much for your follow-thru.

BTW, I thought I saw a note that you’re in the SF Bay area. I very well might be relocating there after the New Year. So if in fact you’re in the area, I’d like to Thank you for all the assistance you’ve provided here… meet for a Coffee or something. If you’d consider that possibility, contact me thru my website: tom@tomjdolan.com

Thanx again Andy…visit the site and see your “Buttons” 🙂
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.