Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 12, 2014 at 6:08 pm #263397
    chrisdus

    Hello there,

    I’ve been trying to get the ‘My Account’ menu item (which directs users to their WooCommerce my-account page) styled using CSS so that the link stands out. Now, I’ve followed an earlier thread, but it doesn’t exactly do what I want, can somebody give me a pointer as to what I’m missing?

    The site is on http://www.digitaldesktops.nl/ and the CSS I have so far is:

    li#menu-item-3151 .avia-menu-fx { display: none; }
    li#menu-item-3151 a {background-color: red!important; color: white!important;height: 30px!important; margin-top: 43px; border-radius: 10px; }

    The problem is that when I hoover over the button, the submenu items are all over the place.

    May 12, 2014 at 9:52 pm #263578
    Yigit

    Hey Christiaan!

    Please add following code to Quick CSS as well

    li#menu-item-3151 a { line-height: 30px !important; }

    Cheers!
    Yigit

    May 13, 2014 at 11:10 am #263867
    chrisdus

    Hi Yigit,

    Thanks for the help,, I’ve added the CSS and it looks like this:
    http://tinypic.com/view.php?pic=10ncqib&s=8#.U3HgsfldW4U

    FYI: This is a mock up of what I’m trying to achieve:
    http://tinypic.com/view.php?pic=wje99f&s=8#.U3Hgv_ldW4U

    As you can see, I basically want everything the same as the other menu items, just the main My Account styled in red. Currently, the submenu items are styled as well, which is a side effect I think?

    Thanks again for your help!
    Chris

    May 13, 2014 at 11:36 am #263877
    Flikk

    got the wrong idea

    • This reply was modified 10 years, 6 months ago by Flikk.
    May 13, 2014 at 1:04 pm #263911
    chrisdus

    Hello again,

    Perhaps I’m doing something completely wrong (it might be worthwhile to let you know that my CSS experience is limited!), but I haven’t been able to get it right yet, the menu still looks the same to me even after adding the above CSS.

    Would it help if I give you access to the WP admin area?

    Current custom CSS is:

    .phone-info {
    font-size: 16px;
    }

    .iconbox_icon.heading-color.avia-font-entypo-fontello {
    color: red;
    }

    .iconlist-char {
    color: red;
    }

    li#menu-item-3151 .avia-menu-fx { display: none; }
    li#menu-item-3151 a {background-color: red!important; color: white!important;height: 30px!important; margin-top: 43px; border-radius: 10px; line-height: 30px !important; }

    .av-main-nav > li > a {
    padding: 5px;
    }

    .menu-item-top-level>a.avia-menu-text {
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: red;
    padding: 8px 13px;
    }

    Regards,
    Chris

    May 14, 2014 at 4:03 pm #264732
    chrisdus
    This reply has been marked as private.
    May 14, 2014 at 4:20 pm #264743
    Flikk

    got the wrong idea, sorry, ill come up with something else
    So the number of the menu item changed?

    edit:

    here you go:

    li#menu-item-3187>a>.avia-menu-text {
    display:inline-block;
    background-color: red;
    color: white;
    border-radius: 10px;
    line-height: 28px;
    padding: 0px 10px;
}
    May 14, 2014 at 5:37 pm #264789
    chrisdus

    Hi Flikk,

    You’re my official hero for the day! :)

    My CSS now is as follows, and it seems to do exactly what I wanted!

    .phone-info {
    font-size: 16px;
    }

    .iconbox_icon.heading-color.avia-font-entypo-fontello {
    color: red;
    }

    .iconlist-char {
    color: red;
    }

    .av-main-nav > li > a {
    padding: 5px;
    }

    .menu-item-top-level>a.avia-menu-text {
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color: red;
    padding: 8px 13px;
    }

    li#menu-item-3187>a>.avia-menu-text {
    display:inline-block;
    background-color: red;
    color: white;
    border-radius: 10px;
    line-height: 28px;
    padding: 0px 10px;
    }

    You have my respect!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Header Button Styling…’ is closed to new replies.