WordPress.org

Ready to get started?Download WordPress

Forums

Suffusion
change menu tabs with css (4 posts)

  1. mario0
    Member
    Posted 1 year ago #

    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

  2. mario0
    Member
    Posted 1 year ago #

    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?

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  4. mario0
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic