CODEWITHSUNDEEP
htmlcss
Drew
Drew

Reputation: 97

List Items Overlap Title in Navigation Bar When Browser Window is Shrunk

If you take the code and shrink your browser window you'll notice that the list items overlap the site title in the navigation bar which is annoying. Does anybody know how to fix this please?

HTML Code:

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Hyperdog Productions</title>
        <link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="wrapper">
                <div id="navigation_bar">
                    <p><a href="index.html" class="logo" id="home">Hyperdog Productions</a></p>
                    <ul class="navbar_list">
                        <li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
                        <li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
                        <li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
                        <li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
                        <li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
                    </ul>   
                </div> <!--End of NAV-->
                <main id="container">
                    <div id="container_wrapper">
                        <img class="container_background" src="images/bg.png" alt="Background" />
                    </div>
                    <div id="footer">
                    </div>
                </main> <!--End of Main-->
                <footer id="copyright">
                </footer>
        </div> <!--End of WRAPPER-->
    </body>
</html>

CSS Code:

@font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}

@font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Margin: 0; */
}

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 1500px;
overflow-x: none;
font-size: 0;
}

body {
font-size: 62.5%;
}

.wrapper {
height: 1500px;
}

#navigation_bar {
width: 100%;
height: 90px;
background-color: #1d1d1d;
}

main {
height: 1300px;
}

#container_wrapper {
width: 100%;
height: 865px;
background-image: url("../images/bg.png");
background-repeat: repeat;
}

#footer {
width: 100%;
height: 435px;
background-color: blue;
}

#copyright {
width: 100%;
height: 110px;
background-color: black;
}

.nav_link:link {
margin: 0;
padding: 10px;
text-decoration: none;
text-align: center;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
color: #ffffff;
}

.nav_link:hover {
color: grey;
}

.navbar_list {
float: right;
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
}

.navbar_list li {
float: left;
list-style-type: none;
list-style: none;
padding: 9px 12px;
margin: 0;
font-size: 10px;
display: inline;
}

.logo {
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
color: #AF7817; /* #2C3539 */
margin: 0;
padding: 9px 12px;
float: left;
left: 20%;
position: absolute;
text-transform: uppercase;
letter-spacing: 10px;
top: 25px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
}

Thanks!

Upvotes: 0

Views: 450

Answers (2)

spencer.sm
spencer.sm

Reputation: 20526

Add the following at the bottom of your CSS to drop the menu links lower down on the page and to center your title on the screen for smaller screen sizes. This is how I'd organize the page.

@media (max-width: 1750px) {
  .navbar_list {
    position: relative;
    display: inline-block;
    float: inherit;
    right: inherit;
    padding-left: 0px;
  }
  .logo {
    position: relative;
    left: inherit;
    float: inherit;
    margin-left: 15px;
  }
}

#navigation_bar {
  text-align: center;
}

It will look like this on smaller screens:

enter image description here

Upvotes: 1

Guilherme Silva
Guilherme Silva

Reputation: 140

If you want to make them disappear

@media (max-width: 1530px) {
  .navbar_list {
    display: none;
  }
}

Something like this WITH bootstrap.css

<div class="container">
<div id="navigation_bar" class="row">
    <div class="col-md-8">
        <p><a href="index.html" class="logo" id="home">Hyperdog Productions</a></p>
    </div>
    <div class="col-md-4">
        <ul class="navbar_list">
            <li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
            <li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
            <li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
            <li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
            <li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
        </ul>   
    </div> <!--End of NAV-->
    <main id="container">
        <div id="container_wrapper">
            <img class="container_background" src="images/bg.png" alt="Background" />
        </div>
        <div id="footer">
        </div>
    </main> <!--End of Main-->
<footer id="copyright">
</footer>
</div> <!--End of WRAPPER-->

Upvotes: 1

Related Questions