Drew
Drew

Reputation: 97

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

When my browser is full screen, everything looks fine. However, when the browser shrinks (to half of my screen size) the links (which are list items) in my navigation bar overlap a div (which is the site's title) on the opposite side of the navigation bar.

Question: What needs to be changed in order for this to be fixed to where the browser simply hides list items as the browser window is shrunk to the left or vice versa?

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/stylesheet.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">
                    </div>
                    <div id="footer">
                    </div>
                </main> <!--End of Main-->
                <footer id="copyright">
                </footer>
        </div> <!--End of WRAPPER-->
    </body>
</html>

It wouldn't surprise me if there were a lot of mistakes below. Sorry! Here is my CSS:

@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: 100px;
background-color: #1d1d1d;
}

main {
height: 1300px;
}

#container_wrapper {
width: 100%;
height: 865px;
background-color: green;
}

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

#copyright {
width: 100%;
height: 100px;
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: 15%;
top: 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: Verdana, sans-serif;
font-size: 24px;
color: white;
margin: 0;
padding: 9px 12px;
color: red;
float: left;
left: 15%;
position: absolute;
text-transform: uppercase;
letter-spacing: 5px;
color: grey;
top: 25px;
text-align: center;
}

Also, how can I center the list items and site title (Hyperdog Productions) vertically within the navigation bar? Thanks

Upvotes: 0

Views: 35

Answers (1)

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

You can use media queries that activate certain rules when the viewport size shrinks as in your case in half.

example if your viewport size is shrunk to 600px then these rules apply for the corresponding elements in your case the list items to stay hidden

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

Upvotes: 1

Related Questions