Modify Top Nav Bar advanced styles

[jkauffman]

I can't quite figure out how to modify the styles of the top nav bar--the styles that aren't available for editing in the skin that is.

I particularly want to adjust the following:
- the list-style-type and padding of the .sub-menu class

list_style_type.png

- I want to add icons before my heading titles

icon_header_titles.png

I've tried calling the classes that Mad Cap inserts after building, but to no avail. I managed to hide the top nav search from my home page but that's as far as I've gotten outside editing the skin itself.

[NorthEast]

I've tried calling the classes that Mad Cap inserts after building, but to no avail.

If you can't modify a style from the skin editor, that is what you'd need to do - find out what styles are used, and add them to your own CSS file.

The best way to do this is to use developer tools (press F12), and use the 'inspect' tool to view the HTML and CSS.
You can also make live edits to the CSS, to test things out before adding it to your stylesheet.

[jkauffman]

Thanks for reminding me that I can live edit my CSS; certainly helps troubleshoot everything. Everything working well so far!

[kwag_myers]

In the first image, I had a project where I needed to remove those chevrons (actually, they're called Right Pointing Guillemets). So (using Dave's tip) I discovered it was the following style, added to my CSS, which overrides the style where it come from (.../Skins/Fluid/Stylesheets/Styles.css) and omitted the \00bb value for content:

Code: Select all

ul.navigation ul > li.has-children > a:after
{
	position: absolute;
	border: none;
	content: "";
	right: 5px;
	top: 9px;
}

You should be able to use this to set the list type and padding. For the second item, it looks like you might need something like (although I'm not sure about the selector ">"):

Code: Select all

ul.navigation > li:before
{
	content: url(image.jpg); /*where 'image.jpg' is the icon file*/
}

needs a :before style to add the icons, unless each icon is unique.