twentythirteen have created a button in the navbar but unable to specify color

  • Resolved jevans17

    (@jevans17)


    8 years, 4 months ago

    I have created a button on the navigation menu using a class created in my child style.css the button shows up fine but I cannot specify the color. instead it is an orange color
    which SEEMS to be inherited from somewhere. I have truly tried to find out where but am unable to do so.
    I am calling this class via the navigation label in the menu item home thus:
    ‘<button class=”navbtnhome”>home</button>’
    my child style.css

    /*
    Theme Name: TwentyThirteen Child
    Description: My Retrobrain child theme
    Author: John W Evans
    Version: 1.0
    Template: twentythirteen
    */

    @import url(‘../twentythirteen/style.css’);

    .main-navigation {
    clear: both;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 35px;
    position: relative;
    }

    ul.nav-menu,
    div.nav-menu > ul {
    margin: 0;
    padding: 0 40px 0 0;
    }

    .nav-menu li {
    display: inline-block;
    position: relative;
    }

    .nav-menu li a {
    color: #141412;
    display: block;
    font-size: 15px;
    line-height: 1;
    padding: 15px 20px;
    text-decoration: none;
    }

    .nav-menu li:hover > a,
    .nav-menu li a:hover,
    .nav-menu li:focus > a,
    .nav-menu li a:focus {
    background-color: #220e10;
    color: #fff;
    }

    .nav-menu .sub-menu,
    .nav-menu .children {
    background-color: #220e10;
    border: 2px solid #f7f5e7;
    border-top: 0;
    padding: 0;
    position: absolute;
    left: -2px;
    z-index: 99999;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    }

    .nav-menu .sub-menu ul,
    .nav-menu .children ul {
    border-left: 0;
    left: 100%;
    top: 0;
    }

    ul.nav-menu ul a,
    .nav-menu ul ul a {
    color: #fff;
    margin: 0;
    width: 200px;
    }

    ul.nav-menu ul a:hover,
    .nav-menu ul ul a:hover,
    ul.nav-menu ul a:focus,
    .nav-menu ul ul a:focus {
    background-color: #db572f;
    }

    ul.nav-menu li:hover > ul,
    .nav-menu ul li:hover > ul,
    ul.nav-menu .focus > ul,
    .nav-menu .focus > ul {
    /*
    clip: inherit;
    overflow: inherit;
    height: inherit;
    width: inherit;
    */
    }

    .nav-menu .current_page_item > a,
    .nav-menu .current_page_ancestor > a,
    .nav-menu .current-menu-item > a,
    .nav-menu .current-menu-ancestor > a {
    color: #bc360a;
    font-style: italic;
    }

    .site-header {
    position: relative;
    }

    .site-header .home-link {
    color: #F7F5E7; /*#141412;*/
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }

    .site-header .site-title:hover {
    text-decoration: underline;
    }

    .site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 10px;
    }

    .site-description {
    font: 300 italic 24px “Source Sans Pro”, Helvetica, sans-serif;
    margin: 0;
    }

    .navbtnhome {
    margin-top: -5px;
    margin-bottom: -5px;
    background-color: #00ff00;
    color: black;
    border-color: yellow;
    border-radius: 10px;
    padding: 5px 15px 5px 15px;
    /*margin-top: 2px;*/
    }

    .navbtnhome:hover {
    margin-top: -5px;
    margin-bottom: -5px;
    background-color: #00ff00;
    color: black;
    border-color: green;
    border-radius: 10px;
    padding: 5px 15px 5px 15px;

    as you can see i’m trying to create a button color of #00ff00 but it just remains orange

    PLEASE help me – i need to know where this orange color is coming from. then I can get on with things.

    I scrapped my web-site plans and started afresh with a new canvas but this color problem persists.
    I know i must have missed something.

    forgive me for what must seem to you a very simple problem but it has stymied me for weeks.

    Thanks for reading…

Viewing 15 replies - 1 through 15 (of 22 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to your site! Thanks.

    Thread Starter jevans17

    (@jevans17)

    my website is on https://www.retrobrain.co.uk/wp-login

    [redacted]

    thanks for prompt reply

    John

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    NEVER EVER (never!) post credentials for you site here. Please delete that user ASAP.

    Please remove the “coming soon” page if you’d like assistance with this. thanks.

    Thread Starter jevans17

    (@jevans17)

    point taken

    thanks steve

    user1 disabled

    plugin deactivated

    best regards

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    If you had another menu item, it would be colored correctly. You have the theme set to make the current menu item orange and, on the home page, it’s current.

    View post on imgur.com

    Thread Starter jevans17

    (@jevans17)

    Thanks Steve,

    however I feel more stupid now.
    i have added buttons to the menu but the same color remains so i seem to have misunderstood you.
    AND even more lamentable is I do not seem to be able to find the code you provide in your imgur snippet or see how it is arrived at.

    what i want to know is can I override the color by amending my .navbtnhome class or do I have to do something more fundamental?

    If your patience will allow, could you please enlighten me?

    best regards

    John

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    OK, we should both smack our foreheads on this one:

    Look at the CSS. Your CSS sets the background-color to green. The theme’s CSS sets the background to orange. If I change your CSS to use background instead of background-color then all is good. background and background-color are two different things.

    View post on imgur.com

    Thread Starter jevans17

    (@jevans17)

    Thanks Steve,

    menu button now working as I intended. As you surmised I did not realise the significence of background and background-color.
    I have a couple of things to tweak regarding the nav menu so please don’t close this for a couple of days. I want to have a go myself before screaming for help.

    thank you so much again.

    John

    Thread Starter jevans17

    (@jevans17)

    https://www.retrobrain.co.uk

    using twentythirteen

    updated style.css child here : https://codepen.io/jevans17/pen/WGkRVa

    when the mouse hovers over the menu buttons a black background block appears (hovering over the “retro computing” button produces that orange color!)

    what I want to achieve:
    I want to make those backgrounds disappear. Preferably I would like the menu buttons appear to sit on whatever the page is showing. (if you understand what I mean)

    Whatever I try anything, nothing changes. The black backgrounds remain.( I might add here that I no longer think i’m as clever as I once did)

    All I want to do is get the menu system working as I want, so that I can commence adding content.

    can someone help

    thanks

    John

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    In the inspector, I enabled the hover state for the menu’s LI element and then saw that the background is set for the hover pseudo-selector for the a element. So, that’s where you’d fix it.

    View post on imgur.com

    Thread Starter jevans17

    (@jevans17)

    Dear Steve,

    I Am confused now probably because you know what you are talking about

    I have looked at your reply

    you seem to be referring to :

    .nav-menu li:hover > a,
    .nav-menu li a:hover,
    .nav-menu li:focus > a,
    .nav-menu li a:focus {
    background-color: #220e10;
    color: #fff;
    }

    am I correct?

    I see the background colour is 220e10 (Black)

    altering this seems to do nothing so I must be totally wrong here

    could you elucidate further please

    thanks

    John

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    It looks like you tried to override it but weren’t sufficiently specific.

    View post on imgur.com

    Thread Starter jevans17

    (@jevans17)

    thanks for prompt reply Steve,

    right lets hope I got close this time

    altered child style.css as in https://codepen.io/jevans17/pen/WGkRVa
    (I added navigation a: hover part from parent theme and altered it

    BUT surprise it changed nothing so I haven’t got it right yet?

    how close am I?

    best regards

    John

    Thread Starter jevans17

    (@jevans17)

    Hello

    I have been experimenting and trying to explore the theme – I realise that the STYLE.cc does not set the area i want to alter
    color 220e10 appears to be a default from somewhere

    What I need is help to change in my child theme – what do I need to do?

    I have tried but removing all references of 220e10 in style.css still will not result in the black background areas being removed from my navigation menu or from my drop-down menu buttons

    I know I am not the only person needing help and i’m sure you need time for yourself but I would appreciate some help with this.

    thanks for reading

    John

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    failing all else, use “!important” to try to force an override in your child theme’s CSS.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘twentythirteen have created a button in the navbar but unable to specify color’ is closed to new replies.