css code how to put the navigation in the middle


Tags: javascript,jquery,html,css

Problem :

I am developing a webpage,in which the screen will fit into the mobile also.

style.css

/* GENERAL STUFF */

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    font-family: 'Cabin', sans-serif;
}

/*.clear {
    clear: both;
}*/

.clear:after {
    display: block;
    clear: both;
    visibility: hidden;
    content: "";
    height: 0;
}

/* HEADER BLOCK */

.header-background {

    padding-top: 50px;
}

 .header-background > div:first-child {
    width: 100%;
    background: #232323;
} 

.header {
    background: #232323;
    color: #B2B2B2;
    width: 80%;
    margin: auto;
}

.header a {
    text-decoration: none;
    color: white;
}

.header a:active {
    color: #19A3A3;
}






#nav {
    position: relative;
    display: block;
    height: 55px;
    line-height: 55px;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #333;

    z-index: 1;
    border-bottom: 1px solid #666;
    font-weight: 600;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
}

#nav, #nav * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.nav-item {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}


/* Desktop */

#desktop-nav .nav-item {
    display: block;
    padding: 0 20px;
    float: right;

    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -ms-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    transition: color 200ms linear;
}

#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
    opacity: 0.7;
}


/* Mobile */

#mobile-nav {
    position: absolute;
    top: 55px;
    right: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    -moz-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    -ms-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    -o-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    transition: visibility 0ms linear 200ms, opacity 200ms linear;
}

#mobile-nav .nav-item {
    display: block;
    width: 100%;
    padding-left: 30px;
    background: #333;
    border-bottom: 1px solid #666;
    opacity: 0;

    -webkit-transition: background 200ms linear, color 200ms linear;
    -moz-transition: background 200ms linear, color 200ms linear;
    -ms-transition: background 200ms linear, color 200ms linear;
    -o-transition: background 200ms linear, color 200ms linear;
    transition: background 200ms linear, color 200ms linear;
}

#mobile-nav .nav-item:hover, #mobile-nav .nav-item:active {
    background: #666;
    color: white;
}

#mobile-nav .nav-item:last-child {
    border-bottom: none;
}


/* Toggles */

.nav-toggle {
    position: absolute;
    left: -100px;
    right: 0;
    line-height: 0px;
    border: none;
    cursor: pointer;

    height: 22px;
    width: 22px;
    margin: 16px 22px;

    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url('../images/menu-icon.svg');
    background-color: #333;
}

.nav-toggle:hover {
    opacity: 0.7;
}

#open-toggle:focus {
    left: -100px;
}

#open-toggle:focus ~ #close-toggle {
    left: auto;
}

#open-toggle:focus ~ #mobile-nav {
    visibility: visible;
    opacity: 1;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

#open-toggle:focus ~ #mobile-nav .nav-item {
    opacity: 1; /* Avoid initial fade in of content, have to use opacity because using visibility breaks functionality */
}


/* Logo */

#logo {
    position: absolute;
    padding: 0 20px;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    color: #fff
}

#logo:hover {
    opacity: 0.7;
}




















.header-logo {
    font-family: 'Indie Flower', cursive;
    font-size: 36px;
    padding: 8px;
    float: left;
}

.header-notes {
    padding: 100px 0;
    width: 100%;
    color: white;
}

.header-notes div {
    margin: auto;
    width: 50%;
    text-align: center;
    font-size: 40px;
}

span.green {
    color: #19A3A3;
}

/* PAGE MAIN CONTENT */

.content {
    text-align: center;
    padding-top: 50px;
}

.content h2 {
    color: #19A3A3;
    padding: 25px;
}

.content p {
    padding: 25px 15%;
}

.hr-background {
    background: url(../img/hr-bg.png);
    width: 229px;
    height: 14px;
    margin: auto;
}

.photos {
    margin: auto;
    margin-top: 30px;
    margin-bottom: 40px;
    display: inline-block;
    width: 70%;
}

.photos ul li {
    float: left;
    list-style: none;
    padding: 1%;
    width: 23%;
}

.photos ul li img {
    width: 100%;
}

.photos ul li:hover h3 {
    color: #19A3A3;
}

.photos a {
    text-decoration: none;
    color: black;
}

.photos h3 {
    padding: 15px 0;
    font-size: 16px;
}

.photos p {
    font-size: 13px;
    padding: 0;
}

.slider {
    display: block;
    margin: auto;
    margin-bottom: 30px;
    width: 60px;
}

.slider ul {
    height: 8px;
}

.slider ul li {
    float: left;
    list-style: none;
    background: url(../img/slide_point_bg.png) no-repeat;
    width: 8px;
    height: 8px;
    margin-left: 5px;
    border-radius: 100%;
}

.slider ul li.active {
    background: url(../img/slide_point_active_bg.png) no-repeat;
}

.slider ul li:hover {
    box-shadow: 0 0 0.5em black;
}

/* FOOTER */

.footer {
    background: #062134;
    color: white;
    display: table;
    font-size: 14px;
}

.footer .column-title {
    margin-bottom: 30px;
    font-weight: bold;
}

.footer > div {
    display: table-row;
}

.footer > div > div {
    display: table-cell;
    width: 23%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer > div > div:first-child {
    padding-left: 5%;
    padding-right: 1%;
}

.footer > div > div:nth-child(2) {
    padding-left: 1%;
    padding-right: 1%;
}

.footer > div > div:nth-child(3) {
    padding-left: 1%;
    padding-right: 20%;
}

.footer p {
    line-height: 200%;
}

.footer input {
    display: block;
    float: left;
    background: #062134;
    /*border: 2px solid white;*/
    border-top: 2px solid white;
    border-right: 0;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /*padding: 10px;*/
    width: 75%;
    color: white;
    height: 36px;
    text-indent: 10px;
}

::-webkit-input-placeholder {
   color: #1F3748;
}

:-moz-placeholder { /* Firefox 18- */
   color: #1F3748;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #1F3748;
}

:-ms-input-placeholder {
   color: #1F3748;
}

.footer button {
    float: left;
    background: #062134 url(../img/arrow-input-bg.png) 10px 10px no-repeat;
    height: 40px;
    width: 40px;
    height: 40px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 0;
    border-left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 30px;
}

/*.row-2 p {
    clear: left;
}*/

.footer input:focus {
    outline: 0;
    background: #4D7EC9;
}

.footer input:hover {
    box-shadow: 0 0 0.5em white;
}

.footer button:hover {
    background-color: blue;
}

.footer button:focus {
    outline: 0;
}

.list-of-resources {
    display: table;
}

.list-of-resources > div {
    display: table-row;
}

.list-of-resources > div  > div {
    display: table-cell;
    padding: 5px 0;
}

.list-of-resources > div  > div:last-child {
    padding: 0 0 0 30px;
}

.list-of-resources a {
    text-decoration: none;
    color: white;
}

.list-of-resources a:hover {
    color: tomato;
}

@media screen and (max-width:1000px) {

    /* HEADER */

    .header-background {
/*      height: 300px;*/
        padding-top: 0;
    }

    .header-notes {
        padding: 50px 0;
    }

    .header-notes > div {
        width: 70%;
        font-size: 35px;
    }

    .header-background > div:first-child {
        top: 0;
    }

    .header {
        background: #232323;
        color: #B2B2B2;
        width: 100%;
        margin: auto;
    }

    .header-logo {
        font-family: 'Indie Flower', cursive;
        font-size: 36px;
        padding-left: 30px;
        float: left;
    }

   /*  nav {
        float: initial;
        clear: both;
    }

    nav ul {

        list-style: none;
        padding: 15px;
    }

    nav ul li {
        display: inline;
        padding: 15px;
    } */

    /* CONTENT */

    .photos {
        width: 90%;
    }

}

@media screen and (max-width:900px) {

    .footer > div > div {
        display: table-cell;
        width: 28%;
        padding-top: 50px;
    }

    .footer > div > div:first-child {
        padding-left: 5%;
        padding-right: 1%;
    }

    .footer > div > div:nth-child(2) {
        padding-left: 1%;
        padding-right: 1%;
    }

    .footer > div > div:nth-child(3) {
        padding-left: 1%;
        padding-right: 5%;
    }

}

@media screen and (max-width:700px) {

    .footer > div > div {
        display: block;
        float: left;
        width: 42%;
    }

    .footer > div > div:last-child {
        clear: both;
        padding-left: 5%;
        padding-top: 10px;
    }


    #desktop-nav {
        display: none;
    }

    #open-toggle {
        left: auto;
    }


}

@media screen and (max-width:600px) {

    .photos ul li {
        padding: 5%;
        width: 40%;
    }

    .photos ul li:nth-child(3n+3) {
        clear: left;
    }

    .photos h3 {
        padding: 15px 0;
        font-size: 18px;
    }

    .photos p {
        font-size: 16px;
        padding: 0;
    }

    .footer > div > div {
        width: 90%;
    }

    .footer > div > div:nth-child(2) {
        clear: both;
        padding-left: 5%;
        padding-top: 10px;
    }

}

@media screen and (max-width:480px) {

    .header-logo {
        font-size: 26px;
        padding: 8px;
    }

    .header-notes > div {
        width: 80%;
        font-size: 26px;
    }

  nav ul {
        list-style: none;
        padding: 5px;
    }

    nav ul li {
        display: inline;
        padding: 5px;
    } 

}

HTML

<body>
    <div class="header-background">
        <!-- <div> -->
         <div id="nav">
        <div id="logo">Site Title</div>
        <nav id="desktop-nav">
            <a class="nav-item" href="#1">Github</a>
            <a class="nav-item" href="#2">About</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#4">Docs</a>
        </nav>
        <input id="open-toggle" class="nav-toggle" type="text" readonly>
        <input id="close-toggle" class="nav-toggle" type="text" readonly>
        <nav id="mobile-nav">
            <a class="nav-item" href="#4">Docs</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#2">About</a>
            <a class="nav-item" href="#1">Github</a>
        </nav>
    </div>
       <!--  </div> -->

       <!--  <div class="header-notes">
            <div><span class="green">/creative</span> one page template</div>
        </div> -->

    </div>

and the js field is:--

(function(adiachenko) {

    window.addEventListener("load", function() {

        var stuffList = document.querySelectorAll("#stuff-list li");

        if (stuffList.length % 4 === 1) {
            var view = window.innerWidth;

            if (view > 600) {
                [].forEach.call(stuffList, function(stuffMember) {
                    // do whatever
                    stuffMember.style.width = "18%";
                });
            }

            window.onresize = function() {
                view = window.innerWidth;
                changePictureSize(view, stuffList);
            };
        }

        function changePictureSize(view, stuffList) {
            if (view > 600) {
                [].forEach.call(stuffList, function(stuffMember) {
                    // do whatever
                    stuffMember.style.width = "18%";
                });
            } else {
                [].forEach.call(stuffList, function(stuffMember) {
                    // do whatever
                    stuffMember.style.width = null;
                });
            }
        }

    }, false);

}(window.adiachenko = window.adiachenko || {}));

Now I am getting the page is like:-this page

But I want the navigation as like :-this page

and this navigation needs to sized as the body of the page..

navigation.css

#nav {
    position:relative;
    width:620px;
    margin:0 auto;
}

ul#navigation {
    margin:0px auto;
    position:relative;
    float:left;
    border-left:1px solid #c4dbe7;
    border-right:1px solid #c4dbe7;
}

ul#navigation li {
    display:inline;
    font-size:12px;
    font-weight:bold;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    border-top:1px solid #c4dbe7;
    border-bottom:2px solid #c4dbe7;
}

ul#navigation li a {
    padding:10px 25px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border-right:1px solid #fff;
    border-left:1px solid #C2C2C2;
    border-top:1px solid #fff;
    background: #f5f5f5;

    -webkit-transition:color 0.2s linear, background 0.2s linear;   
    -moz-transition:color 0.2s linear, background 0.2s linear;  
    -o-transition:color 0.2s linear, background 0.2s linear;    
    transition:color 0.2s linear, background 0.2s linear;   
}

ul#navigation li a:hover {
    background:#f8f8f8;
    color:#282828;
}

ul#navigation li:hover > a {
    background:#fff;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
    visibility:visible;
    opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;
    box-shadow:1px 1px 3px #ccc;
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px;
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

ul#navigation li a.first {
    border-left: 0 none;
}

ul#navigation li a.last {
    border-right: 0 none;
}

but I am failed..where I have to add this field to reach this screen????



Solution :

Check out with the below link.

http://jsfiddle.net/bdd9U/564/

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

    CSS Howto..

    How to evenly distribute menu items with CSS when width and quantity is not known?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to create a single space in css between a sentence and a photo on my wordpress site?

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    How can I eliminate the space above my list?

    How to make div disappear when image is placed over it?

    How to stop columns wrapping in three column liquid page?

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    CSS How to animate a transition from opacity 0 upon hover

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How to add CSS to a specific div class - WordPress

    How to set link on image using maplink in responsive theme?

    how to stop CSS animation without javascript

    CSS How to use margins with different divs

    how to stack elements using CSS

    How do I use the CSS box-model to make sure my body is spaced from the edge of the window despite being 100% high?

    How to Achieve Word Wrap Effect With Children Divs

    How to separate header from content

    How to apply background color to buttons using css in asp.net?

    How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

    How can I place a checkbox within a button? [closed]

    How do I add keyboard bindings to carousel functionality? - jQuery

    How do i make this form same on all browsers?

    How would I have a larger center bottom navbar button in jQuery Mobile default navbar?

    How to get hoverover text to be at the same line-height as the triggering text

    How to get css property value in pure javascript

    How do i set 100% in a div tag background?

    How to make no borders in a td rowspan rows

    How do I make a Javascript alert display only once, ever? [closed]