Adding CSS Buttons to Header Menu

[kintz_09]

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!

[Veena]

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;
}
}

[kintz_09]

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.

[Veena]

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

[kintz_09]

This reply has been marked as private.

[Veena]

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

[kintz_09]

This reply has been marked as private.

[kintz_09]

This reply has been marked as private.

[kintz_09]

This reply has been marked as private.

[Veena]

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

[kintz_09]

This reply has been marked as private.

[kintz_09]

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.

[Veena]

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

[kintz_09]

I’ve figured out my issue.

[Author]

Posts