Twenty twelve child theme navigation menu hover padding.

  • Resolved globetrotterdk

    (@globetrotterdk)


    11 years, 4 months ago

    I am working on a WordPres twenty twelve child theme with a two tone navigation menu that changes tone with a hover. This works fine with the submenus, but for some reason, unlike the submenus, a hover of the nav menu just to the beginning and the end of the actual text, whereas submenus include padding. When I try to add padding to the nav menu root, I end up with no change to the nav menu root and the submenus no longer flow inline with the nav menu root.

    Any idea what I am doing wrong?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Thread Starter globetrotterdk

    (@globetrotterdk)

    Been there, done that. That is how I have gotten as far as I have. I think this has something to do with inline-block elements and how they act.

    Thread Starter globetrotterdk

    (@globetrotterdk)

    OK, in case anone else stumbles on this post, here is the solution for my child theme:

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        margin-left:-45px;
        padding-left: 45px;
        padding-right: 40px;
        background:#A7DBD8;
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align:left;
        width: 100%;
        }
    .main-navigation li ul li a {
        background: none repeat scroll 0 0 #A7DBD8;
        border-bottom: 1px solid #EDEDED;
        display: block;
        font-size: 0.785714rem;
        line-height: 2.18182;
        padding: 0.571429rem 0.714286rem;
        white-space: normal;
        width: 12.8571rem;
    }
    .main-navigation li a,
    .main-navigation li {
	display: inline-block;
	text-decoration: none;
	padding: 0 10px;
	margin: 0 0;
    }
    .main-navigation li ul li a{
	margin-left: -10px;
	color: #444;
    }
    .main-navigation li ul li a:hover{
	margin-left: -10px;
	background: #4CA6A6;
	color: #444;
    }
    .main-navigation li ul li ul li a{
	margin-left: -20px;
	color: #444;
    }
    .main-navigation li ul li ul li a:hover{
	margin-left: -20px;
	color: #444;
    }
    .main-navigation li a:hover {
	background: #4CA6A6;
    }

    globetrotterdk,

    Thanks a lot for sharing this! It works and looks good.
    Unfortunately it prevents the hiding of the main navigation when the width of the browser window is smaller than 656 px (part of the theme’s responsiveness).

    Do you have any idea how to fix it?

    OK, now I found a solution that works for me. Instead of the first definition, I write:

    .main-navigation {
    margin-left:-64px;
    padding-left: 45px;
    padding-right: 40px;
    background:#EDEDED;
    border-bottom: 1px solid #EDEDED;
    border-top: 1px solid #EDEDED;
    display: inline-block !important;
    text-align:left;
    width: 100%;
}

    The rest can stay as it is….

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty twelve child theme navigation menu hover padding.’ is closed to new replies.