Grow your CSS skills. Land your dream job.

[Solved] Change Navigation Bar color(vertical)

  • # September 20, 2013 at 5:35 am

    I am kinda new to CSS actually. I was doing a website and now i would like to change the height of the navigation bar color(vertically). Can anyone help me ASAP :)

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body { 
        background-size: 6000px 6500px;
        background-repeat: no-repeat;
        }
    #menu {
            float: left;
            background-color: #1E90FF;
            border-bottom: 5px solid #ccc;
            border-top: 5px solid #ccc;
            height: 445px;
            width:100%;
        }
        #menu h1{
            font-family: Calibri, Arial, sans-serif;
            font-size: 100px;
            font-weight: bolder;
            text-align: center;
            margin-right: 25px;
            color: #F5F5F5;
    
        }
        #menu a {
            /* Safari */
            -webkit-transform: rotate(-90deg);
            /* Firefox */
            -moz-transform: rotate(-90deg);
            /* IE */
            -ms-transform: rotate(-90deg);
            /* Opera */
            -o-transform: rotate(-90deg);
            /* Internet Explorer */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
    
    
        }
        #menu a {
            line-height: 10px;
            display: inline-block;
            font-size: 40px;
            font-family: Calibri, Geneva, sans-serif;
            float: right;
            width:20px;
            margin-top:150px;
            padding: 15px 10px;
            text-decoration: none;
            font-weight: bolder;
            color: #fff;
    
        }
    
        a.home {height: 10px; background: #FFD700;}
        a.about {height:10px; background: #a24543;}
        a.news {height:10px; background: #32CD32;}
        a.contact {height:10px; background: #FF8C00;}
    
    
        #menu a:hover {
            color: #191970;
            background-color: #00FF00;
        }
    
    #dropdown {
        float: right;
        position: relative;
        background-color: #F0FFFF;
    }
    
    #content h1{
        font-family: Calibri, Geneva, sans-serif;
        font-size: 30px;
        font-weight: bold;
        text-align: left;
    }
    
    #content img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width:400px;
        height:250px;
        border:1px blue
    
    
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    
    /* Safari, Chrome, and Opera */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    
    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
    }
    
    #content h2{
    float: left;
    width: 700px;
    height:200px;
    border:10px groove navy;
    
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:left;
    -webkit-box-align:left;
    
    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
    }
    
    #content p{
    text-align: left;
    font-family: Calibri, Geneva, sans-serif;
    font-size: 20px;
    }
    
    </style>
    
    # September 20, 2013 at 7:29 am

    CSS isn’t enough by itself. We’d, ideally, need the HTML.

    Could you put a reduced case in http://codepen.io/ ?

    Why are you rotating menu items…that seems odd?

    And what with this?

        #menu a {
            line-height: 10px;
            display: inline-block; <---
            font-size: 40px;
            font-family: Calibri, Geneva, sans-serif;
            float: right; <---
    }
    

    Why both?…Just pick one.

    # September 20, 2013 at 8:23 am

    well i have upload it to codepen.io: http://codepen.io/anon/pen/HAdqJ
    ok well i have update the code there.

    # September 20, 2013 at 8:45 am

    So it’s the colored menu items…right?

    The menu items need to do what…be wider (effectively)?

    Gotta tell you, I’m not feeling that design….but perhaps it will grow on me once it’s sorted out.

    # September 20, 2013 at 9:03 am

    A quick play: http://codepen.io/Paulie-D/pen/tbKkj

    Is this more like what you were trying to do?

    Basically, design the menu as though it wasn’t rotated…then rotate it.

    Actually, it has it’s attractions now that I look at it. :)

    # September 20, 2013 at 9:10 am

    yes this is the one.. can you tell me how you did it ?

    # September 20, 2013 at 9:21 am

    Basically, design the menu as though it wasn’t rotated…then rotate it.

    I put some notes in the CSS.

    # September 20, 2013 at 9:29 am

    ok what if i want to increase the color until the top. how to do that?

    Thank you .

    # September 20, 2013 at 10:06 am

    You mean make the menu items taller?

    How tall?

    # September 20, 2013 at 10:35 am

    Like this: http://codepen.io/Paulie-D/pen/Ayhzu

    It could be tidied up quite a lot and there are some magic numbers in there that I would try to abstract out .

    # September 20, 2013 at 7:44 pm

    well until the top of the border.. maybe trying to add some gradient to the colour

    # September 21, 2013 at 12:30 am

    maybe trying to add some gradient to the colour

    That’s easy enough…just change the background of each link class to a gradient.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".