Help in Styling Graphene theme

  • Busaboss

    #5452

    Hi guys, yesterday I though of adding a couple of design modifications in my site to make it look better with Graphene theme. What I want to do is to add a bottom border in the nav menu hover and I was successful by adding this code in the custom user css.

    #nav a:hover {

    display: block;

    border-bottom: 3px solid #FF7E00;

    }

    Unfortunately, when I was hovering around the listed menus in the nav, it looks like it is bouncing when I switch from one category to another. How can I solve that problem? It seems like the added border takes his own space when hovered instead of just appearing on the block display.

    Also, how can I add that border to the “current” menu page I was in? Because it is implemented in hovering but it doesn’t appear to my current location i. e. “android”.

    My other question is that is it possible to combine the two sidebars I have in my 3 column layout? I want to remove the space between the sidebars and make them stick together because it will look better. Anybody has an idea how to do that?

    I hope someone can help me. Thank you very much in advance!

    Here’s the URL of my site: http://www.noypigeeks.com

    Thanks Graphene theme!

    Mod

    Kenneth John Odle

    #31995
    Quote:
    It seems like the added border takes his own space when hovered instead of just appearing on the block display.

    Yes, that’s exactly what it’s doing.

    What most people don’t realize with the CSS box model (because it’s counterintuitive maybe?), is that if you padding, border, or margin to an element, they get added outside, rather than the inside of the defined box. In other words, they add to the size.

    Your effect is seriously cool. The solution to your problem (probably) is to add an invisible black border the same size to non-hover elements by adding this code to your own:

    #nav a {
    display: block;
    border-bottom: 3px solid #000;
    }

    Try it, and let us know how it works for you.

    ronangelo

    #31996

    I suggest the color #111. It matches the default image more closely.

    #nav a {
    border-bottom: 3px solid #111;
    }
    #nav a:hover {
    border-color: #FF7E00;
    }

    You can also add this if you want the selected menus’ border to stay colored.

    .current-menu-item a,
    .current_page_item a {
    border-bottom: 3px solid #FF7E00 !important;
    }

    I’m actually attempting to create my very first wordpress theme. So I’ve been studying. Creating the menu really gave me a headache.

    ronangelo

    #31999

    Edited.

    #nav .current-menu-item a,
    #nav .current_page_item a {
    border-bottom: 3px solid #FF7E00 !important;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.