Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always display without overflowing, regardless of the size of the browser window.

Any advice on how to achieve this?

Thanks :)

#page-links-list {
    /* Styles for the vertical navigation menu */
    border-right: 2px solid rgb(255, 255, 255);
    background-color: #000000;
    list-style-type: none;
    padding: 4% 0.25% 0%;
    margin: auto;
    position: fixed;
    height: 100%;
    float: left;
    width: 12%;
    font-size: 15px;
}

#page-links-list li {
    /* Styles for each parent item in the navigation menu */
    text-align: center;
    padding: 1% 0%;
    display: block;
    width: 100%;
}

#page-links-list a {
    /* Styles for each hyperlink in the navigation menu */
    text-decoration: none;
    text-align: center;
    width: 100%;
    display: block;
    color: rgb(255, 255, 255);
    overflow: hidden;
    padding: 1% 1%;
}

#main a:link {
    color: #ffffff;
}

#main a:visited {
    color: rgb(245, 245, 220);
}

#main a:hover {
    color: hsl(208, 100%, 97%);
}

#main a:active {
    color: darkgray; 
}

.page-links-list-sub {
    /* Styles for expanding submenu under parent items */
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-out;
    padding: 0%;
}
<nav>
            <ul id="page-links-list">
                <li><img id="navigation-menu-logo" src="assets/images/trust-logo.png" alt="The Tropical Rainforests Trust logo"></li>
                <li><a href="https://www.facebook.com"><img src="assets/images/facebook-logo.png" alt="The Facebook logo."></a></li>
                <li><a href="https://www.twitter.com"><img src="assets/images/twitter-logo.png" alt="The Twitter logo."></a></li>
                ...
                ... (ongoing list of menu items)
                ...
            </ul>
        </nav>

htmlcss

Answer №1

In order to provide a thorough response, it would be necessary to understand the interaction between the code you have provided and the content it is affecting. However, based on your inquiry:

It appears that the menu extends below the main content.

When two elements overlap, the use of the CSS property z-index can determine which element appears on top. Higher values will place an element above those with lower values, with the default being 0.

To address this issue, you can add z-index: 1; to either the nav or ul elements. This will allow the elements to still overlap, but ensure that the navbar remains visible on top.

Answer №2

#page-links-list {
    /* Styling for the vertical navigation menu */
    border-right: 2px solid rgb(255, 255, 255);
    background-color: #000000;
    list-style-type: none;
    padding: 4% 0.25% 0%;
    margin: auto;
    position: fixed;
    height: 100%;
    float: left;
    width: 165px;
    font-size: 15px;
}

#page-links-list li {
    /* Formatting for the parent items in the navigation menu */
    text-align: center;
    padding: 1% 0%;
    display: block;
    width: 100%;
}

#page-links-list a {
    /* Styling for the hyperlinks and text in the navigation menu */
    text-decoration: none;
    text-align: center;
    width: 100%;
    display: block;
    color: rgb(255, 255, 255);
    overflow: hidden;
    padding: 1% 1%;
}

#page-links-list #navigation-menu-logo {
    background-color: rgb(255, 255, 255);
    width: 40%;
}

#page-links-list li:hover .page-links-list-sub {
    /* Styles for the submenu when hovering over the parent item */
    display: block;
    max-height: 80%;
    padding: 0%;
    margin: 0%;
    background-color: rgb(255, 255, 255);
}

#page-links-list li:hover .page-links-list-sub a {
    /* Styles for the submenu text on hover */
    color: #000000;
}

#main a:link {
    color: #ffffff;
}

#main a:visited {
    color: rgb(245, 245, 220);
}

#main a:hover {
    color: hsl(208, 100%, 97%);
}

#main a:active {
    color: darkgray; 
}

.page-links-list-sub {
    /* Transition effects for the submenu expanding */
    max-height: 0px;
    overflow: hidden;
    transition: all 0.5s ease-out;
    padding: 0%;
}
<nav>
            <!-- Start of vertical navigation menu and sub menus -->
            <ul id="page-links-list">
                <li><img id="navigation-menu-logo" src="assets/images/trust-logo.png" alt="The Tropical Rainforests Trust logo"></li>
                <!-- Links to social media - First two options in vertical navigation -->
                <li><a href="https://www.facebook.com"><img src="assets/images/facebook-logo.png" alt="The Facebook logo."></a></li>
                <li><a href="https://www.twitter.com"><img src="assets/images/twitter-logo.png" alt="The Twitter logo."></a></li>
                <!-- Home tab in navigation menu -->
                <li><a>Home</a>
                    <!-- Home tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="index.html">Home Page</a></li>
                        <li><a href="index.html#overview-container">Campaign Overview</a></li>
                        <li><a href="index.html#subscribe-form">Subscribe to News Letter</a></li>
                    </ul>
                </li>
                <!-- History tab in navigation menu -->
                <li><a>History</a>
                    <!-- History tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="history.html">History Page</a></li>
                        <li><a href="history.html#history-container">Inception of Tropical Rainforest Trust</a></li>
                    </ul>
                </li>
                <!-- Education tab in navigation menu -->
                <li><a>Education</a>
                    <!-- Education tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="education.html">Education Page</a></li>
                        <li><a href="education.html#education-container">Educational Visits</a></li>
                        <li><a href="education.html#tours-table-container">Educational Visit Bookings</a></li>
                    </ul>
                </li>
                <!-- Community tab in navigation menu -->
                <li><a>Community</a>
                    <!-- Community tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="community.html">Community Page</a></li>
                        <li><a href="community.html#login-container">Comment Section Login</a></li>
                        <li><a href="community.html#post-link">Posts</a></li>
                    </ul>
                </li>
                <!-- About Rainforests tab in navigation menu -->
                <li><a>About Rainforests</a>
                    <!-- About Rainforests tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="about-rainforests.html">About Rainforests Page</a></li>
                        <li><a href="about-rainforests.html#about-rainforests-title">Rainforest Importance</a></li>
                    </ul>
                </li>
                <!-- Visitor Information tab in navigation menu -->
                <li><a>Visitor Information</a>
                    <!-- Visitor Information tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="visitor-information.html">Visitor Information Page</a></li>
                        <li><a href="visitor-information.html#visitor-information-container">Inception of Tropical Rainforest Trust</a></li>
                    </ul>
                </li>
                <!-- Get involved tab in navigation menu -->
                <li><a>Get involved</a>
                    <!-- Get involved tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="get-involved.html">Get Involved Page</a></li>
                        <li><a href="get-involved.html#get-involved-container">Get Involved Introduction</a></li>
                        <li><a href="get-involved.html#adopt-an-animal-form">Adopt an Animal Form</a></li>
                    </ul>
                </li>
                <!-- Adopt an Animal tab in navigation menu -->
                <li><a>Adopt an Animal</a>
                    <!-- Adopt an Animal tab submenus -->
                    <ul class="page-links-list-sub">
                        <li><a href="adopt-an-animal.html">Adopt an Animal Page</a></li>
                        <li><a href="adopt-an-animal.html#adopt-an-animal-title">Photo Gallery</a></li>
                        <li><a href="adopt-an-animal.html#adoption-gift-pack">Gift Pack</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

Answer №3

z-index: 1000;

To enhance your CSS design, consider using the z-index property. Try setting it to either 1 or 1000 for optimal results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to customize the cursor for each individual div?

Can you alter the cursor from a pointer to "not-allowed" within the div or GridList element in ReactJS or Material UI? ...

cssreactjsmaterial-ui

Tips for choosing the class=" * " using jQuery's .html() function

Is there a way to target the string "class" or any other specified string within code retrieved from .html()? If we have an element's HTML content stored in another element (similar to a snippet with preview) <div class="myClass">1</div> ...

jqueryhtmlregexhighlight

Create an excel spreadsheet using HTML tables with the help of jQuery

Upon clicking a button, I aim to generate an excel sheet. Essentially, I am trying to achieve what is being discussed here (Kalle H. Väravas answer). If the following links are not working within Mozilla browser, then maybe my code requires ActiveXObject ...

javascriptjqueryhtmlexcel

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...

htmlcsstwitter-bootstrapbootstrap-5card

Mastering the art of combining images and text harmoniously

I am having trouble aligning my lion image and h1 tag side by side. There seems to be an issue but I can't figure out what it is. h2 { width:50%; float:right; padding:30px 0px 0px 0px; margin:0 auto; } .lion { width:10%; float: left; paddin ...

htmlcss

Is it possible for me to use an image as a grid item?

I have a grid with 3 elements as shown below: Now, I am looking to replace the blue elements with images (they can be just placeholders). .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(30em, auto); justi ...

htmlcssresponsive-designcss-grid

Adaptable/Responsive Layout

Thank you for taking the time to look at this post. I am currently working on gaining experience with html, CSS, and JavaScript in hopes of entering the Front End Developer field. Today, I encountered a few issues while working on this adaptive design. He ...

htmlcssresponsive-design

How can I prevent katex from overflowing?

Currently, I am facing a challenge in handling katex equations that overflow in a react native webview. I am attempting to dynamically break the equations into multiple lines to prevent scrolling and display them separately. Any assistance on this matter ...

cssreact-nativekatex

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Having some trouble setting up Angular with SCSS and Bootstrap. When attempting to run ng serve, I encountered the following error: ./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable. ...

cssangularsassbootstrap-5

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

When I have this code, the ".active" function doesn't work when clicked. However, if I change the div class from "top-menu-popup" to "top-menu-popup active" when opening the page, the menu is already activated. <div class="top-menu-popup"> ...

css

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter

New messages are revealed as the chat box scrolls down

Whenever a user opens the chatbox or types a message, I want the scroll bar to automatically move down to show the most recent messages. I came across a solution that seems like it will do the trick: The issue is that despite implementing the provided cod ...

javascripthtmlcss

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

javascriptjqueryhtmlcss

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

javascripthtmlcssajaxgoogle-maps

Issue with HTML not being displayed during Eclipse Eclipse html not showing up on

This is an example of a servlet: package userInterface; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servle ...

htmleclipsejsp

Dynamic Bootstrap Table with Fixed Header

I am customizing a Bootstrap table by adding CSS for a sticky header. My code snippet includes the following: .table-sticky th { background: #fff; position: sticky; top: -1px; z-index: 990; } <div class ...

htmlcsstwitter-bootstrapbootstrap-4

One login for accessing multiple forms

I am trying to figure out a way to use one login for two different forms that serve different functions. How can I pass the login details between these two functions? Just to clarify, I only have knowledge of JavaScript and VBScript, not jQuery. For inst ...

javascripthtmlasp-classic

Disappearing Into the Background Excluding Specific Divs

I have a dilemma with fading in and out a background image using jQuery fadeIn and fadeOut. The issue arises because my wrapper div contains elements such as sidebar and navigation that are positioned absolutely within the wrapper div, causing them to also ...

javascriptjqueryhtmlcss

What is the reason that <span> elements do not automatically wrap around to the next line when they are in line with each other without any white space?

Once upon a time, I believed that line breaks had no impact on the rendering of HTML due to minification. However, I recently discovered something peculiar. <!DOCTYPE html> <html> <body> <style> div { width: 200px; background: ...

htmlcsshtml-rendering

Can we add to the input field that is currently in focus?

Recently, I've been working on a bookmarklet project. My goal is to append an element to the currently focused input field. For instance, if a user clicks on a textarea and then activates my bookmarklet, I want to insert the text "Hello" into that sp ...

javascriptjqueryhtml