CODEWITHSUNDEEP
htmlcss
risingmoon77
risingmoon77

Reputation: 91

Making Nav Bar responsive when rest of Page is responsive

I am creating a portfolio page for a project on free code camp and I am having trouble with making my Nav bar responsive. It is essentially 2 divs; one for the nav buttons and the other for the background colour and shape. I am new to coding but have stumbled on this hard. I am coding using code pen and here is my code so far.

html

<div class="container">
    <div id="navigation">
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#Portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>

    <div id="Border">
    </div>
</div>

css

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

#navigation {
    display: block;
    width:300px;
    height: 35px;
    padding:18px 12px;
    position: fixed;
    left: 100px;
    width: 200%;
    z-index: 22222;
    transition: all ease .5s;
}

#Border {
    height: 75px;
    width: 1140px;
    position: fixed;
    background: #8e0e17;
}

li{ 
    display: inline;
    padding: 160px;
}

ul {
    list-style-type: none;
}

nav li a{
    color:grey;
    font-weight:700;
    font-size: 25px;
}

Please help, thank you.

Upvotes: 0

Views: 91

Answers (1)

partizanos
partizanos

Reputation: 1126

See this http://codepen.io/anon/pen/PqEmgP. It's using CSS media queries rules. These rules make a webpage to respond to different resolutions.

In this example in screens between 768 and 991 px two rules are added:

@media (min-width: 768px) and (max-width: 991px) {
   .navbar{
    font-size: 15px !important;
  }
  .pull-left>img {
  height: 65px !important;
}
}

This adds to any element with class="navbar" font size (letter size) equal to 14 pixels (one of the units for counting in screens) 

.navbar{
    font-size: 15px !important;
}

Another way to make responsive website is using ready css rules (it's called library). One famous one is bootstrap try searching a bit on that good luck with your codecamp

Upvotes: 1

Related Questions