CODEWITHSUNDEEP
htmlcssresponsive-designresponsive
Denzel Baudet
Denzel Baudet

Reputation: 25

How can I make the navigation responsive?

I try to make my navigation responsive but I cannot manage that. I already tried some things as you can see in my style.css. My header is already responsive but I can't manage the navigation.

This is my website on the desktop/laptop. enter image description here

This is my website on mobile. I want the navigation also in the center like the picture above. enter image description here

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:amount}figure{margin:0;padding:0;}


body
{
    background-color: #F9F9F9;
    height: 100%;
    font-size: 20px;
    top: 0;
    left: 0;
}

header
{
    width: 100%;
    height: 300px;
    background: url("images/woman-wearing-white-long-sleeved-shirt-973401.jpg");
    background-repeat: no-repeat;


    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: cover;
    overflow: hidden;
}

.opacity
{
    width: 100%;
    height: 300px;
    background: rgba(96, 59, 59, 0.7);
    overflow: hidden;
}


.navigation
{
    width: 700px;
    margin: auto;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 30px;
    margin-top: -20px;
    margin-right: 25%;
}

.navigation_list
{
    list-style-type: none;
    padding: 10px;
}

.navigation_list_item
{
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
}



@media screen and (max-width: 768px){
    header{
        width: 100%;
    }

    .opacity{
        width: 100%;
    }

    .logo{
        width: 474px;
        height: 369px;
        background-repeat: no-repeat;
        background-size: 50%;
        margin-left: 30%;
        margin-top: 50px;
    }

    .navigation
    {
        width: 700px;
        margin: auto;
        background-color: black;
        color: white;
        text-align: center;
        border-radius: 30px;
        margin-top: -20px;
        margin-right: 25%;
    }

    .navigation_list
    {
        list-style-type: none;
        padding: 10px;
    }

    .navigation_list_item
    {
        display: inline-block;
        padding-left: 20px;
        padding-right: 20px;
    }
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>
<header>


        <div class="opacity">
            <div class="logo">
            </div>
        </div>
</header>
    <section>
<nav class="navigation">
<ul class="navigation_list">
    <li class="navigation_list_item">Over ons</li>
    <li class="navigation_list_item">Filosofie</li>
    <li class="navigation_list_item">Prijslijst</li>
    <li class="navigation_list_item">Specialisaties</li>
    <li class="navigation_list_item">Contact</li>
</ul>
</nav>
    </section>

</body>
</html>

I hope someone can help me out with this problem. Thanks for the effort!

Upvotes: 0

Views: 57

Answers (2)

Mael_B
Mael_B

Reputation: 13

For a simple responsive design, try the following modification : - Add this block

section {
    display: flex;
}

  • Remove thoses lines

    margin-right: 25%; /* two occurences */

Upvotes: 1

Midz Elwekil
Midz Elwekil

Reputation: 441

you will need to do something like this

.navigation
{
    width: 100%;
    margin: auto;
    color: white;
    text-align: center;
    margin-top: -20px;
    margin-right: 25%;
}

.navigation_list
{
    max-width: 700px;
    list-style-type: none;
    padding: 10px;
    background-color: black;
    margin: 0 auto;
    border-radius: 30px;
}

make the navigation 100% and move the width to the ul (navigation list) and set the margin to 0 auto

one more thing to note, you need to add view port to the head of your page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

to make you page responsive, you can read about the view port here

hope this help

Upvotes: 1

Related Questions