change menu tabs with css
-
I’d like to experiment with the look of the menu tabs by using a child theme.
Things like the background hover colors, font size and weight, tab width and the like.
Thank you for any help.
Cheers
-
Whew! what a process. I got a lot of it worked out.
#nav { background-image: url(images/abc.png); background-repeat: repeat-y; padding-bottom: 2px; margin-bottom: 2px; } #nav ul { display: block; float: left; vertical-align: bottom; list-style: none outside none; margin: 0 0 -1px 170px; padding: 0; } #nav ul li { border: none; float: left; margin: 0 55px 0 0; padding: 0; border-radius: 0px; } #nav ul li a { display: inline-block; padding: 6px 8px 5px; text-decoration: none; background-color: transparent; border-radius: 0px; } #nav ul li a:hover { background-color: #ff7b00; background-image: none; border-radius: 0px; } #nav .current_page_item a, #nav .current_page_item a:hover, #nav li a:active { text-decoration: none; background-color: #ff7b00; background-image: none; border-radius: 0px; } #nav .current_page_item a, #nav .current_page_item a:hover, #nav li a:active { color: red; border-radius: 0px; } #nav .current_page_item { background-color: white; border-radius: 0px; } #nav .current { background-color: white; } #nav a.current, #nav a.current:visited, #nav a.current:hover, #nav a.current:active, #nav li a:hover { color: #444; border-radius: 0px; } #nav li { float: left; position: relative; z-index: 1; } #nav li a:hover, #nav li:hover { z-index: 100; } #nav ul li, #nav ul li a { border-top-left-radius: 0px; border-top-right-radius: 0px; } #nav a, #nav a:visited { display: block; font-size: 100%; font-weight: bold; height: 22px; line-height: 22px; text-decoration: none; color: #fff; } #nav a { border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-top-left-radius: 0px; border-top-right-radius: 0px; }
Some parts are still unclear to me.
I’ve tried to get rid of the tab right and left hand curved radii; no success. I’ve liberally tried using “border-radius: 0px;”. I tried change them in the rounded-corners.css file. All of this done in a child theme.
Any thoughts out there?Sorry Mario0, I can’t find the navigation where I’d expect it on the demo website http://wp-themes.com/suffusion/ . If yours is different, can you link your website and we’ll go from there.
Hi Andrew,
I used the WP/Suffusion functionality menu creation. Appearance –> Menus –> create a menu. Placed below the header. It’s not on the demo site. It’s not live yet. Hopefully that’s enough information.
thanks for getting back to me.
Cheers,
Marioo
- The topic ‘change menu tabs with css’ is closed to new replies.