• 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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mario0

    (@mario0)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter mario0

    (@mario0)

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘change menu tabs with css’ is closed to new replies.