Looking for advice on how to centre my drop down nav bar for college project

user_13000430 0
Viewed 44

I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research. The site is very basic as it is just a template at the moment. My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.

nav {

    background-color: transparent;

}

nav a {
    color: #F2E2C4;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-family: 'Spartan';
}

nav ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

nav a.beachview {
    float: left;
    color: #F2E2C4;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    font-size: 45px;
    padding-top: 2px;
    font-family: 'Spartan';
}

nav a:hover {
    background-color: none;
    color: #8C8474;
}

nav ul ul {
    display: none;
    position: absolute;
}

nav ul li:hover ul {
    display: inline-block;
}

nav ul ul li {
    float: none;
}

nav li {
    float: left;
}
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title>Beachview - Home</title>
    <meta name="author" content="Your Name">
    <meta name="description" content="Example description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="" />
    <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>

<body>
    <div class="bg-img">
        <div class="container">
            <nav>
                <ul>
                    <li><a href="#">ROOMS</a>
                        <ul>
                            <li><a href="#">GLASGOW</a></li>
                            <li><a href="#">EDINBURGH</a></li>
                            <li><a href="#">ABERDEEN</a></li>
                            <li><a href="#">DUNDEE</a></li>
                        </ul>
                    </li>
                    <li><a href="#">GALLERY</a></li>
                    <li><a class="beachview" href="#">BEACHVIEW</a></li>
                    <li><a href="#">LOCAL</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <main>Main stuff goes here</main>
</body>

</html>

Not 100% sure if the above makes sense as the background image will not load.

navbar css html
1 Answers
  1. Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown"><a href="#">ROOMS</a>
  <ul>...</ul>
</li>
  1. Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
  /* Make it so you can position the child ul with absolute position 
  / relative to this parent */
  position:relative; 
}
.dropdown ul {
  position:absolute;
  left:0;
  top:2.5em;
}
  1. Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
  background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
  height: 200px; // Sample height
  width: 100%;   // Sample width
  display: flex; // Flex allows for easy centering of child-elements
}

nav {
  background-color: transparent;
  margin:auto; // this is the key to the centered alignment
}

I also moved your class="container" from the wrapper div to your nav and removed that div.

Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):

.bg-img {                            
  /* Replace this img url with your image */
  background-image: url('https://via.placeholder.com/900x200/000/333'); 
  height: 200px; /* Sample height */
  width: 100%;   /* Sample width */
  display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}

nav {
  background-color: transparent;
  margin:auto;
}
.dropdown {
  /* Make it so you can position the child ul with absolute position 
     relative to this parent */
  position:relative; 
}
.dropdown ul {
  position:absolute;
  left:0;
  top:2.5em;
}

/* None of the below code was modified */
nav a {
    color: #F2E2C4;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    text-decoration: none;
    position: relative;
    font-family: 'Spartan';
}

nav ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

nav a.beachview {
    float: left;
    color: #F2E2C4;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
    font-size: 45px;
    padding-top: 2px;
    font-family: 'Spartan';
}

nav a:hover {
    background-color: none;
    color: #8C8474;
}

nav ul ul {
    display: none;
    position: absolute;
}

nav ul li:hover ul {
    display: inline-block;
}

nav ul ul li {
    float: none;
}

nav li {
    float: left;
}
<body>
  <div class="bg-img">
    <!-- this is where the old <div class="container"> was -->
    <nav class="container">
      <ul>
        <li class="dropdown"><a href="#">ROOMS</a>
          <ul>
            <li><a href="#">GLASGOW</a></li>
            <li><a href="#">EDINBURGH</a></li>
            <li><a href="#">ABERDEEN</a></li>
            <li><a href="#">DUNDEE</a></li>
          </ul>
        </li>
        <li><a href="#">GALLERY</a></li>
        <li><a class="beachview" href="#">BEACHVIEW</a></li>
        <li><a href="#">LOCAL</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>
  </div>
  <main>Main stuff goes here</main>
</body>

user_25744530
Related