Top of screen not showing NAV menu

Is there a way to keep my main navigation menu fixed at the top of the page? I have both a hamburger nav menu that pops up when clicked and an embedded page nav menu.

I want the hamburger nav menu to always stay on top, but for some reason, the embedded nav menu keeps showing through.

Check out this codepen to see the issue: https://codepen.io/TheGreatEscape/pen/ebYgGO You can also watch a short YouTube video of the problem here: https://youtu.be/sWzCLOzRJUQ

Here is the relevant CSS code snippet:

/*===== NAV BUTTONS =====*/
    
#menu-button{ display:none}
a { 
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
}
    
a:hover, a:active, a:focus {
outline: none;
float:none;
clear:both;
text-align:center;
display:inline-block;
position:absolute;
left:0;
right:0 }
    
.templateux-navbar { 
position: fixed; 
top: 0px; 
left: 0; 
width: 100%;
padding: 0; 
z-index: 99999;
}
    
.templateux-navbar .container-fluid { 
max-width: 100%;
}
    
.templateux-navbar .toggle-menu { 
z-index: 9999;
}
    
.templateux-navbar .templateux-menu { 
top:35px;
float:none; 
clear:both;
text-align:center;
display:inline-block; 
position:absolute;
right:210px
}
    
...

Answer №1

The problem you are experiencing is related to the z-index. I was able to resolve it by assigning the class hamburger to your first .templateux-navbar element and adjusting the CSS accordingly. You can find the updated CSS below.

.templateux-navbar { 
    position: fixed; 
    top: 0px; 
    left: 0; 
    width: 100%;
    padding: 0; 
    z-index: 9;
}
.templateux-navbar.hamburger {
    z-index: 10;
}

The issue in your code stems from assigning the same z-index to both menus, resulting in the second nav taking precedence. By assigning a higher z-index to your hamburger menu, we were able to fix this issue.

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

Block Button styles not displaying in IE when set to Full Width

I can't figure out why, but it seems to be functioning properly on every other internet platform except this one. The first picture shows the button in IE, the second contains the code, and the third displays the button in Chrome. https://i.sstatic. ...

How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them: <div class="asideContent"> <ul> <li> <p> </p> </li> <li> <p></p> </li> ...

What is the correct way to link an image path to my PHP script?

I am currently working on a project as a student where we created a MySQL database named Video_Game_Shop. Our task is to connect this database to a website using PHP and HTML, and display all the games listed in our database on one page. To achieve this, ...

How can I ensure that a bigger sprite image fits inside a smaller div?

I have a unique situation where I am working with a large image sprite that is 1030px by 510px and contains two smaller images, each being 515px by 515px. My goal is to extract the two small images from the sprite and set them as backgrounds for two <im ...

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

Implementing a CSS stylesheet that is triggered when the user reaches the top of the webpage, and incorporating an

Currently, I have code that controls the hiding and showing of my navigation menu when a user scrolls up on the page. $.fn.moveIt = function(){ var $window = $(window); var instances = []; $(this).each(function(){ instances.push(new moveItItem($( ...

Displaying JSON keys and values individually on an HTML page

Looking to display a JSON array in HTML using ngFor TypeScript : import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-for', templateUrl: './ng-for.component.html', styleUrls: ['./ng-for ...

"Implementing unique typefaces on a static website hosted on AWS

I've been attempting to incorporate a unique font into my CSS class using font-face. I have experimented with both .otf and .ttf file formats, uploading the custom font files to an S3 bucket. I made sure to grant public permissions to the font files a ...

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

I am facing an issue with inserting a div before a paragraph element based on the given clientHeight. Specifically, I need to locate the closest paragraph element from the specified clientHeight and then add a div before or after that particular element. ...

Should the event happen inside a div section

How can I determine if an element is currently positioned within a specific div? I am working on a vertical scrolling menu where the height of the navigation div is set and overflow is hidden to show only a portion of the links at a time. To navigate thr ...

Add up the values in the table by organizing them into groups

There is a table below that I am working with: <table> <tr> <th>Category</th> <th>Value</th> </tr> <tr> <td class="cat1">cat1</td> <td class="value" ...

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

placed three blocks inside the table cell

Is there a way to align three blocks in the table-cell layout so that p1 is at the top, p2 is at the bottom, and p3 is in the middle? Here is the corresponding HTML: <div id="table"> <div id="row"> <div id= ...

I am experiencing difficulties with my bootstrap module not loading

Could you please investigate why my module isn't loading? The module is supposed to load under the specified conditions in the third last column, but when I test the code, it doesn't work. Can you assist me in identifying what might be causing th ...

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

Is it possible to insert additional lines into the default HTML file using VS Code?

Is it possible to customize the HTML template generated automatically by VS Code? For example, when I type html:5 + TAB, I would like the resulting HTML file to include predefined "style" and "script" tags along with some common code snippets that I regu ...

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

When it comes to printing, the @Media CSS rule

I have a specific structure on my HTML page: <html> <head></head> <body> <nav> .... navigation menu </nav> <div> <div></div> <div class="to-print"> <h2>Th ...

Formatting Anchor Tags Inside a Table Data Element

My existing CSS section is as follows: .leftMemberCol { width:125px; vertical-align:top; padding: 13px; border-width:0px; border-collapse:separate; border-spacing: 10px 10px; text-align:left; background-color:#f2f3ea; } I have a td section (a left sideb ...