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

Monitor the change in values upon pressing the submit button on Angular

I am currently working with an edit form that contains data in the input fields. <ng-form #infoForm="ngForm" novalidate> <div> <label for="firstName">First Name :</label> <input type=" ...

htmlangulartypescriptangular-materialtypescript2.0

JavaScript code that moves the active link to the top of the navigation when the window width is less than or equal to 800px

I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide. However, I'm facing an issue with moving the active link to the top of the na ...

javascripthtmlcssnavigationresponsive

The AJAX request to the URL is failing

Creating a webpage with the ability to control an IP camera's movements such as moving up and down or zooming in and out involves calling specific URLs. While trying to implement this feature asynchronously, I encountered issues using AJAX which did n ...

javascriptjqueryhtmlajaxcall

Why is my <a> element not functioning properly?

I'm encountering a small issue with my first HTML website. The hyperlinks in the "about me" section are not clickable, yet those in the drop down menu are functioning properly. Any thoughts on why this might be happening? If you'd like to take a ...

htmlcss

What is the functionality of the keydown event?

Whenever the input text value is not empty, I want my .removetext div to be displayed, but it's not working correctly. When I type something after the second character, my .removetext gets hidden, but it shouldn't be hidden when the input is not ...

javascriptjqueryhtmlcss

Exploring HTML5 video playback in AngularJS

When I use this code: <video id="video" class="video-js vjs-default-skin" controls width="640" height="264"> <source src="http://localhost:3000/files/public/photos/Let-her-go.mp4" type='video/mp4' /> <p class="v ...

javascriptjqueryangularjshtmlmeanjs

Verifying the current password and updating the hashed password

I have been struggling with creating a PHP script for updating user hashed passwords. Unfortunately, the script is not functioning as expected and no error messages are being displayed. Every time, it only shows "Your old password is incorrect" message. I ...

phphtmlmysqli

Ways to format table using flex-wrap sans the use of flexbox

My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...

htmlcss

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

jquerycsshtmlscrollbar

implement an angular directive to apply a CSS element

I am utilizing AngularJS and ng-repeat to populate a dynamic list of studies. This list has the capability to toggle into child elements of each item, creating an accordion-style toggle list that can go up to three levels deep for each list item. I am curr ...

javascriptjqueryhtmlcssangularjs

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascriptcssangularevents

Aligning a row with space between columns

I am looking to display 6 divs on my website with a margin between them for aesthetics. In order to maintain the design when resizing the site, I had to specify widths for the columns. However, I am struggling to center all the cols effectively, despite tr ...

jqueryhtmlcsstwitter-bootstrapwrapper

Tips for updating span content within an automatically generated table in Django by leveraging AJAX feedback

On my Django website, I have a products page where I can add items to the cart by clicking an "Add to Cart" button. These items are added as order items based on the item's primary key. Now, on the Cart page, I can see the specific products that have ...

htmljquerydjangoajax

What are the steps to transforming shorthand CSS into longhand?

Is there a tool available that can automatically convert shorthand CSS to longhand? I am in need of this functionality because I would like to utilize SmartSprites, which is not compatible with shorthand formatting. Additionally, if there is a tool that c ...

csscss-sprites

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

androidcssjquery-uihtmloverflow

Poor quality picture captured with the use of the getUserMedia() Javascript function

Is there a way to improve the resolution of mobile phone camera screenshots taken with JavaScript's getUserMedia function? if (navigator.mediaDevices) { navigator.mediaDevices.getUserMedia({ video: { width: { min: 1280, }, heig ...

javascripthtmlcameragetusermedia

Exploring a new method for AJAX loading when handling large amounts of data into multiple div elements

As I continue my learning journey with html and jquery, I have been exploring ways to replicate monitoring systems (SCADA) into web-based systems. During this process, I discovered openseadragon as a MAP system similar to google maps that allows for overla ...

javascriptjqueryhtml

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

I am working with radio buttons Here is the HTML code: <input type="radio" class="first" name="bright" checked> <input type="radio" class="second" name="bright" > <input type=" ...

javascripthtml

Angular 4's Panel Window: A User-Friendly Interface

Having experience with Adobe Flex, I am familiar with creating new panel windows in Action Script by using the 'new' keyword and popping them up using popups. The customization of these windows was achieved through functions provided in the Panel ...

javascripthtmlangularjs