Created
June 27, 2013 18:02
-
-
Save proframework/5878769 to your computer and use it in GitHub Desktop.
Adding styling to widget menu in WordPress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* removes padding and brings menu items right up against edges of widget. | |
* make margin 0 to have spacing between widget border and menu | |
*/ | |
.custom .columns ul ul.menu { | |
padding: 0; | |
margin: -15px; | |
} | |
/* remove padding and marin from lists */ | |
.columns ul li ul li { | |
margin: 0; | |
padding: 0; | |
} | |
/* This is where you style the menu items */ | |
.widget .menu li a { | |
color: #222; /* color of the links */ | |
display: block; | |
text-decoration: none; /* no underline */ | |
padding: 5px 10px; /* 5px is top and bottom padding, 10px is left and right padding */ | |
font-size: 12px; /* size of the menu item font */ | |
border-bottom: 1px solid #D1CDBC; /* add a border to the bottom of each item */ | |
font-weight: bold; /* make font bold */ | |
} | |
.widget .menu li:last-child a { | |
border-bottom: 0; /* remove bottom border from last menu item */ | |
} | |
/* This is where you style what the menu item looks like when hovering, and when on the current page */ | |
.widget .menu li a:hover, | |
.widget .menu li.current-menu-item a, | |
.widget .menu li.current_page_item a { | |
background: #EFF2F4; /* background color */ | |
color: #B8671B; /* text color */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment