Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 16, 2015 at 7:04 am #536329
    janicenisha

    Hi there,

    I have 2 buttons on the top nav bar on my page. With some help from Andy I’ve added a bordered style button with some css. I need to add a button with some background colour, managed to do this, but on mobile, the background shape gets distorted. Also when the sticky header comes up after scrolling, my text color changes to the theme color. What am I not adding?

    My code :
    li#menu-item-422 {
    border: 2px solid;
    background-color: #003b70 !important;
    border-radius: 2px;
    color: #ffffff !important;
    padding: 3px 10px;
    margin-top: -2px;
    }

    Instead of this then,can I add a bg image for the button or style the css as so? Want it to look something like this – minus the icon – http://enjoycss.com/webshots/4v_8.png
    Thanks!

    November 16, 2015 at 4:07 pm #536568
    Guenni007

    well the css of that button (text-color etc.) goes via the anchor.

    so try 

    li#menu-item-422 a {
border: 2px solid;
background-color: #003b70 !important;
border-radius: 2px;
color: #ffffff !important;
padding: 3px 10px;
margin-top: -2px;
}
    November 16, 2015 at 4:15 pm #536578
    Guenni007

    perhaps:

    li#menu-item-422 a {
    background-color: rgb(101, 182, 210) !important;
    border-bottom: 3px solid rgb(83, 151, 169);
    color: #fff !important;
    padding: 5px;
}

    and if you don’t like that text-decoration on hovering :
    f.e.

    li#menu-item-438 a:hover {
    background-color: rgb(83, 151, 169)  !important;
    border-bottom: 4px solid rgb(83, 151, 169) !important;
text-decoration: none
}
    November 17, 2015 at 5:29 am #537085
    janicenisha

    Hi Guenni

    Thank you very much, this worked great! Just one thing, the button seems to be a little transparent on hover. Also the bottom border only shows once I scroll down the page and the sticky header is visible. Any idea why?

    November 17, 2015 at 6:01 am #537104
    janicenisha

    Hey Guenni,

    Do ignore the last reply, I managed to sort it out. Just added a ‘important!’ for the bottom border in the ‘a’ portion. Not sure about the transparency, but i could live with that.

    Thanks again!

    November 17, 2015 at 7:29 am #537136
    Basilis

    Hi!

    Glad you sort that out!
    We will be happy to help with anything else you might need.

    Thanks a lot for your time and patience

    Cheers!
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Top Nav Bar button background’ is closed to new replies.