0

The navigation menu of my webpage is covering the main content/content of the site (stuff inside parent). When I add margin to navbar or parent then the navbar shifts down along with the image/content in parent. Below is the code:

<html>
<head>
    <title>Digital Ethics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="white">
    <div class="outer">
        <div class="nav">
            <div class="pic"><img src="logo.png" /><br><p><p></div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
        <div class="parent">
            <div class="bimg"></div>
            <div>
            <div></div>
            <div></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
    background-image: url("background.jpg");        
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px;
}

.outer {
    width:100%px;
    height: auto;
    margin: 0px;
}

.nav {
    width: 100%;
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    margin-top: -30px;

}
.nav .pic{
    width: 40%
    float: left;
    display: inline-block;
    margin-left: 60px
}
.nav .pic p{
    color: a5a5a5;
    margin-left: 10px;
}
.nav-bar{
    width: 60%;
    float: right;
    margin-top: 45px;
}
.nav-bar ul{
    list-style-type: none;
}
.nav-bar li{
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.nav-bar a{
    color: #4f4946;
    text-decoration: none;
}

.nav-bar a:hover{
    color: #eb4934;
    transition: 0.75s ease-out;
}

.nav-bar a:active{
    color: #eb4934;
    transition: 0.75s ease-out;
}


.parent {
    height: auto;
    width: 80%;
    background-color: white;
    margin-top: 180px;
}

.bimg {
    background-image: url("img.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
}

Please help, Thanks in advance.

Luca
  • 1,588
  • 2
  • 22
  • 26

3 Answers3

0

this is added partical responsive...

ul {
  display: flex;
  width: none;
  white-space: nowrap;
}
Andrei Fedorov
  • 3,689
  • 2
  • 13
  • 25
0

You should set top, left and right of your NAV, then you can change your parent margin-top (to move .bimg DIV I suppose) keeping your NAV fixed-top.

CSS

.nav {
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Here a working fiddle

p.s: you have a typo in your CSS .outer definition

width:100%px;

Luca
  • 1,588
  • 2
  • 22
  • 26
-1

Remove height from .parent class. You have to add top: 0 to nav class to fix it to top as well.

This is the working example here..

body {
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg");        
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px;
}

.outer {
    width:100%;
    height: auto;
    margin: 0px;
}

.nav {
    width: 100%;
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    top: 0;
}
.nav .pic{
    width: 40%
    float: left;
    display: inline-block;
    margin-left: 60px
}
.nav .pic p{
    color: a5a5a5;
    margin-left: 10px;
}
.nav-bar{
    width: 60%;
    float: right;
}
.nav-bar ul{
    list-style-type: none;
}
.nav-bar li{
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.nav-bar a{
    color: #4f4946;
    text-decoration: none;
}

.nav-bar a:hover{
    color: #eb4934;
    transition: 0.75s ease-out;
}

.nav-bar a:active{
    color: #eb4934;
    transition: 0.75s ease-out;
}


.parent {
    width: 80%;
    background-color: white;
    margin-top: 200px;
 
}

.bimg {
    background-image: url("https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
}
<html>
<head>
    <title>Digital Ethics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="white">
    <div class="outer">
        <div class="nav">
            <div class="pic"><img src="logo.png" /><br><p><p></div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
        <div class="parent">
            <div class="bimg"></div>
            <div>
            <div></div>
            <div></div>
            </div>
        </div>
    </div>
</body>
</html>
Abdul Moiz Khan
  • 693
  • 5
  • 13