Skip to:
Content
Pages
Categories
Search
Top
Bottom

Custom menus like this example

  • I’ve just created a child theme based on the default them. I’d like to change the Home/ Members/ Groups/ Forum etc menu so that it doesn’t have the colour outline, and functions like the top menu in the following website:

    http://solopracticeuniversity.com/

    Specifically I want white writing and an impression when hovered over with the mouse, like in the example.

    Could anyone help me with the code? (I’m a real novice!)

    Thanks
    Harry

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

  • @mercime
    Keymaster

    @mercime

    That is solved by searching online. One search result shows this: http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/. You can opt to use background color instead of images. Adjust to taste

    That’s great, thanks mercime.

    So I just add this code:

    .solidblockmenu{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1em;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(media/blockdefault.gif) center center repeat-x;
    }

    .solidblockmenu li{
    display: inline;
    }

    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }

    .solidblockmenu li a:visited{
    color: white;
    }

    .solidblockmenu li a:hover, .solidblockmenu li .current{
    color: white;
    background: transparent url(media/blockactive.gif) center center repeat-x;
    }

    As I’m a complete novice, is there any chance you could tell me which file i’d have to put that in? I want it to appear in exactly the same position as the default theme menu. Do I do anything with the html code in that link?

    Cheers
    Harry


    @mercime
    Keymaster

    @mercime

    You’ve got to adjust the code based on the selectors you’ve got in your theme:

    So in your style.css file within your child theme’s folder, add this after the lines already there:

    `ul#nav {
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: #000066;
    }

    ul#nav li {
    display: inline;
    float:none;
    margin: 0px;
    }

    ul#nav li a {
    float: left;
    padding: 9px 11px;
    border-right: 1px solid white;
    background: none;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    }

    ul#nav li.selected a, ul#nav li.current_page_item a {
    background: #000000;
    color: #ffffff;
    }`

    Again, adjust to taste.

    Great thanks mate – It was all trial and error (I’m sure it’s very intuitive to people who’s seen it before) but that’s the first code i’ve ever edited!

    A couple of questions if you have time:

    How do I add the hover function? Can I change the text? How do I remove the border underneath?

    Ok this is the code I’ve added:

    ul#nav {
    border: 3px solid #ffffff;
    border-width: 2px 2;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    background: #98AFC7;
    font-size: 11px;
    }

    ul#nav li {
    display: inline;
    float: 0px;
    margin: 0px;
    font: 11px normal “Tahoma”;
    font-weight: bold;
    }

    ul#nav li a {
    float: left;
    padding: 5px 10px;
    color: #003366;
    border-right: 2px solid white;
    border-left: 2px solid white;
    background: none;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    }

    ul#nav li.selected a, ul#nav li.current_page_item a {
    background: #151B54;
    color: #ffffff;
    }

    ul#nav li a:hover {
    color: #151B54;
    background: #ffffff;
    }

    It seems to work. I’ve just added it in my new child theme css file underneath the “inherit default theme…” stuff. Does all that look ok?

    I wasn’t able to work out how to remove the border underneath, if you’re able to help?

    Sorry I keep reposting, I keep figuring it out.

    I added the word “top” to border, so it’s now:
    ul#nav {
    border-top: 0px solid #ffffff;
    border-bottom: 0px;
    border-width: 0px 0;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    background: #2554C7;
    font-size: 11px;
    }

    ul#nav li {
    display: inline;
    float: 0px;
    margin: 0px;
    font: 11px normal “Tahoma”;
    font-weight: bold;
    }

    ul#nav li a {
    float: left;
    padding: 5px 10px;
    color: #ffffff;
    border-right: 0px solid white;
    border-left: 0px solid white;
    background: none;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    }

    ul#nav li.selected a, ul#nav li.current_page_item a {
    background: #15317E;
    color: #ffffff;
    }

    ul#nav li a:hover {
    color: #151B54;
    background: #ffffff;
    }

    I tried adding “bottom” but couldnt get that to work.

    If anyone could check this (it seems to work for me) that would be great.

    Thanks
    Harry

    This seems to have changed the text that appears in the login field


    @mercime
    Keymaster

    @mercime

    @hmarshall site URL?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Custom menus like this example’ is closed to new replies.
Skip to toolbar