0

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!

Denzel Baudet
  • 25
  • 7
  • 3
    Does this answer your question? [Fastest Way to Make Website Responsive?](https://stackoverflow.com/questions/9917664/fastest-way-to-make-website-responsive) – Michelangelo Dec 17 '19 at 19:31
  • 1
    what he meant is to position the navigation at the middle of the screen i think! – Midz Elwekil Dec 17 '19 at 19:37
  • Yes excactly @MidzElwekil. I tried it but the navigation stays at the same place the whole time. – Denzel Baudet Dec 17 '19 at 19:40
  • @DenzelBaudet i have update your code below, now your navigation will be positioned at the middle of the screen, and also don't forget to add the viewport to the head of your page – Midz Elwekil Dec 17 '19 at 19:42
  • Thank you very much @MidzElwekil. This is indeed the solution! – Denzel Baudet Dec 17 '19 at 19:50
  • @MidzElwekil Ok don't care, the answer is still here: https://stackoverflow.com/questions/29400246/how-to-center-responsive-navigation-bar It took me 10 seconds to find it... – Michelangelo Dec 17 '19 at 20:10

2 Answers2

1

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

Midz Elwekil
  • 441
  • 4
  • 12
  • Why should he do that? What does that do? How does it answer the question? [How To Answer](https://stackoverflow.com/help/how-to-answer) – Rob Dec 17 '19 at 19:40
  • Your answer is just code. You should explain why he should use your code and how it solves his issue and not just blurt out code. – Rob Dec 17 '19 at 19:43
  • you are welcome, you will need to read more about responsive web pages as your page missing some codes. here's some resources for you: https://www.w3schools.com/html/html_responsive.asp https://dzone.com/articles/using-csshtml-make-responsive https://developers.google.com/web/fundamentals/codelabs/your-first-multi-screen-site https://www.w3schools.com/css/css3_mediaqueries.asp https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – Midz Elwekil Dec 17 '19 at 19:53
1

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

section {
    display: flex;
}

  • Remove thoses lines

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

Mael_B
  • 13
  • 5