WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] How to: style custom menu top margin (2 posts)

  1. cogmios
    Member
    Posted 1 year ago #

    I have in the sidebar a custom menu but I have the problem that the first menu item's background color extends all the way to the top of the sidebar when selected.

    It seems that .widget_nav_menu has a margin all the way to the top.

    You can see this on the front page of http://populair.eu.

    FYI: these are my twentytwelve customizations:

    /*
    Theme Name: Populair.eu
    Theme URI: http://populair.eu
    Description: Child theme for the Twenty Twelve theme
    Author: Edward de Leau
    Author URI: http://edward.de.leau.net
    Template: twentytwelve
    Version: 0.1.0
    */
    @import url("../twentytwelve/style.css");
    
    /* 1. move sidebar to the left */
    /*-- move sidebar to the left --*/
    @media screen and (min-width: 600px) {
        .site-content {
            float: right!important;;
        }
        .widget-area {
            float: left!important;
        }
    }
    
    /* for IE8 and IE7 ----------------*/
    .ie .site-content {
        float: right!important;;
    }
    .ie .widget-area {
        float: left!important;;
    }
    /* 2. makes the body background transparant */
    #page, #site-generator {background-color:transparent!important;}
    
    /* 3. make lines red */
    hr {background-color: #ff0000!important;margin: 1em 0 1em 0!important;}
    
    /* 4. remove padding of body + shadow */
    body .site {
        padding: 0px!important;
        padding: 0rem!important;
        margin-top: 0px!important;
        margin-top: 0rem!important;
        margin-bottom: 0px!important;
        margin-bottom: 0rem!important;
        box-shadow: none!important;
    }
    
    /* 5. change text color of widget area */
    .widget-area {color: #fff!important;}
    .widget-area a {color: #fff!important;}
    
    /* 6. float widget area to right and adjust width*/
    .widget-area {
        float:left!important;
        width: 200px!important;
    }
    .menu-s-container { float:left!important;margin-right:5px!important;width:195px!important;}
    .textwidget {float:left!important;}
    
    /* 7. move content to the left instead of center */
    .site {
        margin: 5px!important;
    }
    
    /* 8. change body colors to white */
    body, a, p {color:#fff!important;}
    
    /* 9. style menu */
    .menu li a {color:#fff;font:20px arial;letter-spacing:1px;text-decoration:none;padding-top:0px;padding-bottom:5px;display:block!important;}
    .menu ul li a {color:#fff;font:12px arial;letter-spacing:1px;padding-top:2px;padding-bottom:2px;display:block!important;}
    .menu li a:hover {color:#000!important;background-color:#ccc!important;}
    .menu ul li a:hover  {color:#000!important;}
    .current-menu-item a:hover {color:#000!important;}
    .current-menu-item > a {background-color:#ff0000!important;color:#fff!important;font-weight:bold;display:block!important;}
    .menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
    .widget_nav_menu {margin-top:0px;}
    .widget-area .widget {margin-bottom:0rem;}
    
    /* 10. remove boxes from images */
    img { box-shadow: none!important; }
    
    /* 11. remove site navigation */
    #site-navigation {
    	display: none;
    }
    
    /* 12. remove WP footer */
    .site-info{display:none;}
    
    /* 13. smaller sidebar bigger content */
    .site-content {width: 79%;}
    .widget-area {float: right;width: 25%;}
  2. cogmios
    Member
    Posted 1 year ago #

    ah stupid me - resolved (picked the wrong menu)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic