Adding CSS Buttons to Header Menu

Support Forums for LiveMesh Themes & Plugins Forums Agile Theme Support Adding CSS Buttons to Header Menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #9728
    Kintz_09kintz_09
    Member

    Hi,

    I’m trying to add 2 css buttons to the header menu to match this site: netter3danatomy.com

    I’ve tried to add the css using the CSS classes option in the menu structure settings but i’m not having any luck.

    This is what I’ve added to the child style sheet

    .login-menu {
        float: right;
        margin-top: 50px;
        display: block;
        color: #b11523;
        background-color: white;
        text-decoration: none;
        padding: 5px 12px;
        float: left;
        font-size:0.9em;
        text-transform: uppercase;
        font-weight: 100;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    .signup-menu {
        float: right;
        margin-top: 50px;
        color: white;
        background color: #b11523;
        text-decoration: none;
        padding: 5px 12px;
        float: right;
        font-size: 0.9em;
        text-transform: uppercase;
        font-weight: 100;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    When adding these classes to the CSS Classes in the Menu, all that occurs is changing the background color.

    Any idea what the best way to add the buttons are? I don’t need these buttons to show up when the slideout menu is in use.

    I appreciate any tips or help.

    Thanks!

    #9737
    VeenaVeena
    Moderator

    I didn’t see anything wrong in buttons,It looks fine.
    Inorder to hide buttons pls use the below custom CSS in themeoptions –

    @media only screen and (max-width: 767px)
    {
    .logsign {
    display: none;
    }
    }
    
    #9739
    Kintz_09kintz_09
    Member

    Thanks for the code to hide the buttons on the mobile versions!

    I am trying to mimic http://netter3danatomy.com on a new wordpress using the Agile theme on my local server. Using the css i posted above I get this result: http://awesomescreenshot.com/0403moca85

    I’m guessing that the child css I created is conflicting with the theme css.

    #9755
    VeenaVeena
    Moderator

    When you come online pls let me know.Let us see what can be done.
    Thanks

    #9760
    Kintz_09kintz_09
    Member
    This reply has been marked as private.
    #9772
    VeenaVeena
    Moderator

    Sorry for the trouble given to you.Actually my intention was when your site becomes online.
    Thanks

    #9834
    Kintz_09kintz_09
    Member
    This reply has been marked as private.
    #9854
    Kintz_09kintz_09
    Member
    This reply has been marked as private.
    #9855
    Kintz_09kintz_09
    Member
    This reply has been marked as private.
    #9863
    VeenaVeena
    Moderator

    Now your site seems fine.I am not finding any issue.You have already removed the hover effect, bullets and you changed the menu color also.If you need any further help pls let us know.
    Thanks

    #9875
    Kintz_09kintz_09
    Member
    This reply has been marked as private.
    #9959
    Kintz_09kintz_09
    Member

    Hi, I’m really struggling to get this to work. Can you please offer some assistance?

    I need the styling to not change on hover. I can’t figure out what to add to the css to prevent the button from changing size and the text color changing.

    Here is the current css I am using:

    /* Signup and Login buttons on Custom Menu Widget in Header*/
    li#menu-item-20 {
        float: right;
        margin-top: 35px;
        display: block;
        color: white;
        background-color: #b11523;
        text-decoration: none;
        padding: 5px 12px;
        float: right;
        font-size: 0.9em;
        text-transform: uppercase;
        font-weight: 100;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top: none;
        background-image: none;
    }
    
    li#menu-item-19 {
        float: right;
        margin-top: 35px;
        display: block;
        color: #b11523;
        background-color: white;
        text-decoration: none;
        padding: 5px 12px;
        float: left;
        font-size:0.9em;
        text-transform: uppercase;
        font-weight: 100;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top: none;
        background-image: none;
    }
    

    I also cannot figure out how to make the buttons move up in the sticky header.

    #9961
    VeenaVeena
    Moderator

    Sorry for the delay.We will get back to you shortly.

    #9963
    Kintz_09kintz_09
    Member

    I’ve figured out my issue.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Adding CSS Buttons to Header Menu’ is closed to new replies.