WordPress.org

Ready to get started?Download WordPress

Forums

additional CSS for nav menu (3 posts)

  1. newbieWW
    Member
    Posted 9 months ago #

    thanks to WPyogi and Andrew I was finally able to modify my nav-menu

    problem in short here is my website check out nav menu
    website
    I'm tying to make this look like this
    menu

    details
    I wan't some more feature in my nav menu which wasn't in the themes for ex : dotted border on one side. I was able to do this by removing border script and adding border-right : 2pt dotted red !important; im my custom css. here is my website.
    these are all the nav menu option I can get from my theme

    /* 3. MAIN NAVIGATION DROPDOWN MENUS (Add main navigation presentational styles here) */
      #header #navigation {
        display: block !important;
        margin-top: .382em;
      }
      #header #navigation ul.nav {
        float: right;
        /* LEVEL 2 */
    
        /* LEVEL 3 */
    
      }
      #header #navigation ul.nav > li a {
    
        border-right : 2pt dotted red !important;
        background: #fcfcfc;
        font-weight: bold;
        position: relative;
        -webkit-border-radius: 0em !important;
        border-radius: 0em !important;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
      }
      #header #navigation ul.nav > li a:hover {
        border-color: #e8e3e3;
        background: #fff;
      }
      #header #navigation ul.nav > li:hover a {
        border-color: #e8e3e3;
        background: #fff;
      }
      #header #navigation ul.nav > li.current-menu-item > a,
      #header #navigation ul.nav > li.current_page_item > a {
        color: #ff0c00;
      }
      #header #navigation ul.nav > li.parent a {
        -webkit-border-bottom-left-radius: 0;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
      }
      #header #navigation ul.nav > li.parent a:after {
        font-family: 'WebSymbolsRegular';
        display: inline-block;
        font-size: .857em;
        margin-left: .618em;
        content: ";";
        color: #e3d7d7;
        font-weight: normal;
      }
      #header #navigation ul.nav > li.parent a:hover:before {
        content: "";
        display: block;
        height: 2px;
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 99999;
      }
      #header #navigation ul.nav > li.parent:hover a:before {
        content: "";
        display: block;
        height: 2px;
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 99999;
      }
      #header #navigation ul.nav > li.parent:hover a:after {
        color: #ff0c00;
      }
      #header #navigation ul.nav > li.parent ul li a:after {
        visibility: hidden;
      }
      #header #navigation ul.nav > li.parent ul li.parent a:after {
        visibility: visible;
        content: "]";
        float: right;
      }
      #header #navigation ul.nav > li.parent ul li.parent ul li a:after {
        visibility: hidden;
      }
      #header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after {
        visibility: visible;
        content: "]";
      }
      #header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after {
        visibility: hidden;
      }
      #header #navigation ul.nav ul {
        border: 1px solid #e8e3e3;
        margin-top: -1px;
        padding: .372em 0;
        box-shadow: 0 0.202em 0 0 rgba(232, 227, 227, 0.4);
        -webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 227, 0.4);
        background: #fff;
      }
      #header #navigation ul.nav ul li a {
        border: 0;
        background: #fff;
      }
      #header #navigation ul.nav ul ul {
        left: 100%;
        top: -0.372em;
      }
      h3.nav-toggle {
        display: none;

    but I want more option, right now my theme css treats both hover and dorp-down menu style as one css if I want different background color for hover and drop-down and I can't do that :( please help me out thanks in advance :)

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    You may want to try a CSS forum such as:

    http://csscreator.com

  3. newbieWW
    Member
    Posted 9 months ago #

    once again thank you yogi, I think you are some kind of lucky charm every time you show up a solution just unearths itself :D anyway with some guessing and on some hunch I finally created what I want on my own!!! take a look
    website
    all I want know is now how to change my main navigation button size adding more padding might do that trick but it adds more padding to everything even to drop-down menu. got any suggestion? i will take a look at that csscreator thanks :)

Reply

You must log in to post.

About this Topic

Tags

No tags yet.