changing menu colour

  • Author
    Posts
  • #110091

    Hi there,

    can i use CSS to change the black menu bar across the top? I would like it to be white and then have a purple colour for the buttons?
    Thankyouuu

    The blog I need help with is: (visible only to logged in users)

    #110218
    cbavota
    Member

    Yes you can.

    .navbar-inverse.black,
    .navbar-inverse {
       background: #fff;
    }
    
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
       background: #9F56BA;
    }
    
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
       color: #444;
    }
    #110246
    jessicairelandlove
    Member
    Original poster

    Thanks so much. It’s almost what I want- I managed to change the purply colour to what I want but the white is not transparent anymore like the black was. Is it possible to have the white transparent menu?

    This is what my CSS currently looks like- I know its doubled up and all over the place- but it basically looks exactly how I want it right now except I want the black to be white transparent please.. is this possible?

    .navbar-inverse {
    background-color: #000000;
    border-color: #baaaaa;
    }

    .navbar-inverse .navbar-nav > li > a {
    color: #baaaaa;
    }

    .navbar-inverse.black,
    .navbar-inverse {
    background: #fff;
    }

    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
    background: #baaaaa;
    }

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
    color: #baaaaa;
    }
    .navbar-inverse {
    background: rgba(0,0,0,0.06);
    }

    #110247
    jessicairelandlove
    Member
    Original poster

    okay – I changed the colour on the bottom of the code it hovers white- I am happy with the way it looks now on the internet (doesn’t particularly NEED to be white.) – the problem I have now is when I view it on a mobile I can’t read the menu options (this is where a white background would help) I just don’t want it completely solid..

    Am I asking too much??

    .navbar-inverse {
    	background-color: #000000;
    	border-color: #baaaaa;
    }
    
    .navbar-inverse .navbar-nav > li > a {
    	color: #baaaaa;
    }
    
    .navbar-inverse.black,
    .navbar-inverse {
       background: #fff;
    }
    
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
       background: #baaaaa;
    }
    
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
       color: #ffffff;
    }
    .navbar-inverse {
    	background: rgba(0,0,0,0.06);
    }
    #110266
    cbavota
    Member

    It is white when I visit your site on mobile. Did you figure it out?

    If you want to change the color of the mobile menu button, you can use this:

    .navbar-inverse .navbar-toggle .icon-bar {
       background-color: #ffffff;
    }
    #110278
    jessicairelandlove
    Member
    Original poster

    Heya.. Thanks!! Nah I haven’t figured it out.. I changed the whole thing to white that’s why. But then it cuts off stuff on the computer one. It’s all overwhelming me now I can’t seem to get it right!

    If I change it to white it takes away the transparency on the computer- but if i don’t then you can’t see the menu on the mobile!

    #110301
    cbavota
    Member

    In comes the power of media queries…

    @media(max-width:768px) {
       //Add you CSS here for mobile
    }

    Read more about media queries to understand how to use them properly.
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  • The topic ‘changing menu colour’ is closed to new replies.