Seeking guidance on how to perfectly align my collapsible navigation bar for a university assignment

Question

Seeking guidance on how to perfectly align my collapsible navigation bar for a university assignment

Currently, I am tackling a project for my college course, and the navigation bar is posing some challenges. Despite conducting various research attempts to resolve the issue, the site remains quite basic as it stands as just a template. Primarily, my objective for the navigation bar was to center it on the main background image while enabling the "Rooms" tab to have a dropdown functionality.

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>

I'm not entirely certain if the above information makes sense since the background image does not seem to be loading properly.

html css navbar

Answer 1

Answer №1

To create a dropdown menu, add a .dropdown class to the li element containing the dropdown ul.

<li class="dropdown"><a href="#">ROOMS</a>
  <ul>...</ul>
</li>

To align the dropdown below the "Rooms" link, apply the following styles:

.dropdown {
  /* Allow absolute positioning of child ul relative to parent */
  position:relative; 
}
.dropdown ul {
  position:absolute;
  left:0;
  top:2.5em;
}

Add display: flex to your .bg-img container and include margin: auto; in the child-element nav for vertical and horizontal centering.

.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; // Easily center child-elements with Flex
}

nav {
  background-color: transparent;
  margin:auto; // Center alignment key
}

I have updated by moving your class="container" from the wrapper div to the nav element and removed the unnecessary div.

Here is a full working code snippet. (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; /* Easily center child-elements using Flex with margin:auto */
}

nav {
  background-color: transparent;
  margin:auto;
}
.dropdown {
  /* Allow absolute positioning of child ul relative to 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">
    <!-- Old <div class="container"> moved to <nav> -->
    <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 content goes here</main>
</body>

Answer 2

To create a dropdown menu, add a .dropdown class to the li element containing the dropdown ul.

<li class="dropdown"><a href="#">ROOMS</a>
  <ul>...</ul>
</li>

To align the dropdown below the "Rooms" link, apply the following styles:

.dropdown {
  /* Allow absolute positioning of child ul relative to parent */
  position:relative; 
}
.dropdown ul {
  position:absolute;
  left:0;
  top:2.5em;
}

Add display: flex to your .bg-img container and include margin: auto; in the child-element nav for vertical and horizontal centering.

.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; // Easily center child-elements with Flex
}

nav {
  background-color: transparent;
  margin:auto; // Center alignment key
}

I have updated by moving your class="container" from the wrapper div to the nav element and removed the unnecessary div.

Here is a full working code snippet. (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; /* Easily center child-elements using Flex with margin:auto */
}

nav {
  background-color: transparent;
  margin:auto;
}
.dropdown {
  /* Allow absolute positioning of child ul relative to 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">
    <!-- Old <div class="container"> moved to <nav> -->
    <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 content goes here</main>
</body>

Seeking guidance on how to perfectly align my collapsible navigation bar for a university assignment

Answer №1

Similar questions

Ensure the position of a DIV is synchronized with the three-dimensional world while hovering over a ThreeJS Object

Store HTML content in cache for optimal rendering in WebView

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

Instructions for pulling data from a datatable row and showing it in a modal dialog for editing

Toggling jQuery to show or hide content depending on the selector

Accessing Flask from various devices

[SCSS] I am experiencing difficulties with loading fonts on my machine/browser, while they are functioning normally on other devices

When the user hits the enter key, automatically submit a form without the need for

If the sidebar is not found on WordPress, delete the CSS code

Switch between showing the Font Awesome TitleText and its associated Class with a single click

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

How to Alter the Color of a Hyperlink in HTML

"Enhance Your Slide Up/Down Menu with a Unique Hover Effect in jQuery

Unlock maximum screen viewing on your custom video player with these steps to activate fullscreen

iOS is causing issues with the JavaScript function and not allowing it to

Tips for creating a vertical Angular Material slider with CSS

Setting custom domains on Heroku is essential for optimizing the performance and branding of my website

Tips for aligning the navigation bar, main content, and footer in the center

Position the label and the select dropdown side by side within the sweetalert 2 component

Using Javascript math to create a backdrop effect by drawing rectangles around multiple other rectangles