I am wanting the main menu navigation button text (i.e. DOCTORS, PATIENT INFO, etc.) to change to a white text color with the orange background color. For some reason, I cannot figure this out. I know this would be a simple fix for someone else.
WORKING EXAMPLE-
http://tocdocs.com/new_nav.html
Any help?
Try something like:-
#nav > li:hover > a {
color: #fff;
}
The direct child (<) is there to stop it selecting the sub menu items too.
At the moment, you seem to have the hover class applied to the <li> in your CSS, not to the <a>.
Try
#nav a:hover, #nav a:focus{
background-color: #f47a1f;
color: white;
}
(Adding focus also gives those styles to anybody using keyboard navigation.)
Thanks @SamA74 and @TechnoBear! Both solutions would work and I think I will go with the one that includes the focus property.
Next step for me is to add a small pipe or vertical stroke to align perfectly between each of the main menu buttons (i.e. OUR DOCTORS | SERVICES | PATIENT INFO | etc.). Obviously it would be omitted from the last menu item (CONTACT).
Something like this maybe?
#nav > li:not(:last-child):after {
content:" | ";
}
Also, hi Todd 
.
Hey @RyanReese. I may have figured it out already⌠take another look at the link and let me know your thoughts.
#nav li {float:left;position:relative;border-right: 1px solid #efefef; margin-right: -1px;}
#nav li:last-child {border-right:none;}
Although, I believe it was a bad idea to use a negative number as a margin. Am I correct?
Thatâs basically what I had but I combined it into one rule . You also used a border instead of a pseudo element.
You can have the negative margin there, but probably not needed. Looks like a bandaid fix for something (but I havenât delved into it).
Without the negative margin-right, it was pushing things onto a second line.
You have made the menu fit by guessing (trial and error probably) at a padding amount on each side of the anchor that will make the menu just fit along the whole length (padding:0 20px). Therefore when you add a 1px border the whole things is too long and breaks to another line. Your negative margin offsets the extra border and allows it all to remain on one line by offsetting the added pixel width.
This is a fragile concept and if the user (or indeed you) resize the nav text by 1px larger then items break and wrap to another line (or if you add or change the text content). I would guess that some browsers or devices are showing the menu on two lines anyway as the length of text varies greatly between browsers so you canât really estimate how much padding you will need to make things fit exactly.
Therefore with this approach you have to err on the side of caution and reduce the padding.
When building menus like these then there are things you can do to make them more robust. If instead of using padding to space the items you give each item a specific width that matches the total width then the text items can be centred using text-align:center and no padding is required. This would allow for text to zoom up and down quite a bit without breaking and will account easily for variations in text length over different browsers and platforms. Of course you will need to factor this into your media queries for smaller screens etc and change things appropriately. It is quite a rigid approach although it is more robust that the padding method.
An even better approach would be to use automatic centring which can be done using the display:table and table-cell properties and will work back to ie8 although is a little more complicated to set up. There would be no need for widths on the list items and they would stretch as required and centred once again width text-align:center.
Or for modern browsers the flexbox approach also allows automatic stretching and centring.
Both the above also allow the menu to be fluid for quite a lot longer than other methods and would cut down on the need for extended media queries to manage the smaller sizes.
@PaulOB - Iâve modified the nav to include the table and table-cell approach that you mentioned and I believe that it is working well. Here is a link to the revised page:
http://tocdocs.com/table_cell_nav.html
The only tinkering that I would want to do is to remove the border-right off of the last table-cell item (Contact). And I am noticing that the far left and far right edges of the nav container are showing a single thin white space. I am being picky, but I was curious why it is there and how to remove it.
And as always, I truly appreciate your help!
Hi,
I would have put the border-right on the table cell (the list element) instead of the anchor and it will likely solve your spacing issue but you will also want to add border-spacing:0 to the ul (the display:table element).
You can now remove the 20px left and right padding from the anchor on the top level menu items as it is no longer needed.
Note when styling the top level of a nested menu you should use the child selector when you want to add properties that do not need to cascade into the sub menus.
e.g.
#nav > li {}/* top level only*/
#nav > li > a {}/* top level only*/
That means you can stop properties cascading into child menus when they have different properties etc.
Brilliant! You have a gift of explaining the reasoning behind the solutions you offer. I really appreciate the help @PaulOB!
I wonder if the pseudo elements holding the triangles on both the nav sides rather should be placed in the li elements? Can they interfer with the list/table rendering in some way even if they are AP?
It would be easy to ,move them to the main lis, e.g.:
#nav>li:first-child::before {
content: url(i/gfx_triangle_left.png);
display: block;
position: absolute;
top: 35px;
left: -17px;
background-color: transparent;
width: 16px;
height: 16px;
}
#nav>li:last-child:after {
content: url(i/gfx_triangle_right.png);
display: block;
position: absolute;
top: 35px;
right: -17px;
background-color: transparent;
width: 16px;
height: 16px;
}
Maybe @PaulOB would be so kind and enlighten me if there is any downside to have the pseudo elements on the ul.
There is a possibility that the browser could construct anonymous cells around the pseudo elements and I have occasionally seen gaps or empty cells in tables where a âclearfixâ fix has been inadvertently left in place and an extra gap appears. It may be down to browser choice as to whether the absolute element would cause a gap but the clearfix solution certainly does cause gaps when applied unnecessarily to the display:table element.
Yes that would be a more sound approach and avoid any possibility of anonymous table-cells being constructed. In older browsers position:relative was not supported on table cells but is now supported in modern browsers and allows absolute elements to be placed relative to the cell.
Thanks! I thought of that, and decided the AP pseudo elements on the lis would refer position yo the greater parent, the table, that could take position.
Is it the same when the ul has a list display too?
Yes if the list elements were position:static then of course the ul parent with relative applied would be the stacking context for those arrows but in this case the list elements are already position:relative as the dropdowns are positioned from them (although of course we could also auto position them but that would not be so reliable I think). IIRC then it was browsers like Firefox and Chrome that didnât obey position:relative on table-cells while IE was ok but these days we donât really need to worry about older versions of chrome or Firefox otherwise we would need to cater for a few hundred versions. 
Not quite sure what you were asking that you didnât already know the answer to ?
Sorry, just trying to cover all grounds.
Thanks for taking the time!
@PaulOB - So I have implemented the new CSS properties and this page (http://www.tocdocs.com/blog/category/patient-education/) is spilling the last button âContactâ onto a second line. Looks fine in my browser but the client has sent a screenshot of their browserâs appearance. I thought that using the table and table-cell approach would restrict the navigation buttons from forming to two lines?
What gives?
Hi,
When I check your link the nav has not table display, it has the default list display with items.
Is the css file the correct version? Itâs dated today but the only table display is for the header.
It will.
Please try this code snippet for the nav. I took the css from the link and changed the part that should use the table display.
/****************************/
#nav {
background-color: #fff;
/*width: 100%;*/
height: 51px;
list-style: none;
position: absolute;
top: 97px;
left: 0px;
margin: 0 auto;
padding: 0 0 0 0px;
overflow: visible;
z-index: 99;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 15px;
display:table; /******** ADDED */
width:100%; /******** ADDED */
}
#nav li {
/* float: left; ******** REMOVED */
position: relative;
border-right: 1px solid #efefef;
margin-right: -1px;
display:table-cell; /******** ADDED */
vertical-align:middle; /******** ADDED */
width:1%; /******** ADDED */
white-space:nowrap; /******** ADDED */
}
#nav li:last-child {
border-right: none;
}
#nav>li:first-child::before { /******** MOVED FROM #NAV */
content: url(i/gfx_triangle_left.png);
display: block;
position: absolute;
top: 35px;
left: -17px;
background-color: transparent;
width: 16px;
height: 16px;
}
#nav>li:last-child:after { /******** MOVED FROM NAV */
content: url(i/gfx_triangle_right.png);
display: block;
position: absolute;
top: 35px;
right: -17px;
background-color: transparent;
width: 16px;
height: 16px;
}
#nav li a {
display: block;
/* height: 51px;******** REMOVED */
/* line-height: 51px;******** REMOVED */
text-decoration: none;
color:/*#43545e*/ #647179;
/* padding: 0 20px;******** REMOVED */
text-align:center; /******** ADDED */
}
/****************************/
I moved the triangles from the nav to the two end items according to my suggestion posted before.
IPlease try if it works as you meant it.