The footer is blocking the mobile menu from view

Good day everyone,

I've been racking my brain trying to figure out the issue I'm facing. The navigation menu is hiding behind the footer instead of appearing above it.

You can view my code here

 /* Navigation Menu */
.menu {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1;}
.menu li a {display: block; padding: 15px 5px;}
.menu li.subitem a {padding: 15px;}
.toggle {order: 1; font-size: 20px;}
.item.button {order: 2;}
.item {order: 3; width: 100%; text-align: center; display: none}
.active .item {display: block;}
.button.secondary {border-bottom: 1px #4c9e9e solid;}

/* Footer */
.container-fluid {width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.bg {background-color: teal;}
.text-snow {color: #FAF6F6;}
.footer-setup {position:absolute; bottom: 0; padding-bottom: 3rem; padding-top: 3rem; z-index: 1;}
.row {display: flex; flex-direction: column; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; text-align: center;}
.row-setup {padding-top: 3rem;}
.footer-row {flex: 1; margin-bottom: 3rem;}
.footer-row:first-child {margin-left: 20px; margin-right: 20px;}
.footer-row {margin-left: 20px; margin-right: 20px;}
.navbar-brand {display: inline-block; padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap;}
.brand-name {margin: -0.5rem 0 0.5rem; font-size: 2.5rem; line-height: 1.2;}
.navbar-brand span {color: #FFAA17;}
.navbar-brand p {margin-top: 0; margin-bottom: 1rem;}
.follow {padding-top: 0.5rem; padding-bottom: 0.5rem;}
.d-flex {display: flex;}
.justify-start {justify-content:space-between;}
.row3, .row4 {display: none;}
htmlcss

Answer №1

Integrate the following CSS code into the navigation section.

   display: flex;
   justify-content: center;

For more information, visit Flexbox Concepts.

Answer №2

In the section labeled /* Footer */ within your CSS file:

.footer-setup {
  position: absolute;
  bottom: 0;
  padding-bottom: 3rem;
  padding-top: 3rem;
  z-index: 1;
}

You might want to experiment with adjusting the z-index property to a negative value like -1, or you could also consider modifying the z-index for your nav element under the /* Basic Styling */ section.

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 could be causing my class to not be affecting a specific element in Sass?

Using React and sass, I attempted to utilize the activeClassName property on a NavLink component but found that my active class was not working as expected due to its order in relation to the default class. How can I resolve this issue? Here is the code: ...

cssreactjssass

Adding a div via an Ajax call is only successful during the initial page load

Currently, I am utilizing a combination of YQL and jQuery to retrieve content from a distant page. While I am able to successfully load the content during the initial page load, I encounter an issue when attempting to return to the same page after navigati ...

jqueryhtmlajaxdomdocument

Custom container width causes animation to crash when scrolling

I'm having trouble with my header. When the containers change with scrolling, an animation takes place. Everything works fine with native Bootstrap CSS, but when I customize the width of the container in my custom CSS (the width set to 1140px), the an ...

javascriptjqueryhtmltwitter-bootstrap

Sending FormData from React.js to an Express.js backend results in loss of data

I encountered a problem while developing a book library management CRUD system using React v18. The issue arises when attempting to add data to my MongoDB Atlas database. Whenever I pass the formData to axios.post through Redux, the req.body on the backend ...

javascripthtmlnode.jsreactjsexpress

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

javascripthtmlcsssvgfrontend

Having issues with CSS vertical margin not functioning properly

#outline { background: green; height: 96vh; width: 96vh; } #box { background: white; height: 86vh; width: 86vh; margin: 5vh; border: 1px solid #DDDDDD; overflow: hidden; } <div id="outlin ...

htmlcss

The printing function for the window system can cause disruptions to the layout of the table

After creating a page with a simple table that can be filled in and printed, I noticed some issues with the table formatting after printing. The intended table design was supposed to look like this: https://i.stack.imgur.com/aAk89.png However, upon print ...

javascripthtmljquerycss

Embed Javascript Code Within Text Field

Is there a way to incorporate this JavaScript into the "price" text value? Below is the code snippet: <script> function myFunction() { var x = document.getElementById('car-select')[document.getElementById('car-selec ...

javascripthtml

The bootstrap table did not meet my expectations as I had hoped

I am currently using Bootstrap to create a basic two-column table similar to the one on the Bootstrap website here: http://getbootstrap.com/css/#tables. To achieve this, I have implemented a javascript function to display the table as shown below: $(&bso ...

javascripthtmlcsstwitter-bootstrap

Why does the fillText() method in HTML5 Canvas erase everything after using the clearRect() method?

Whenever I use the writeTextToCanvas method before the clearCanvas method, everything works perfectly. However, if I call the clearCanvas method first and then writeTextToCanvas, the drawing functions work fine after clearing the canvas but the fillText fu ...

javascripthtmlcanvas

"Exploring the possibilities of combining jQuery Touch Punch with the power of css

I'm facing an issue with jQuery UI Touch Punch. I am able to drag everything smoothly, but when I apply css3's "translateY", it works perfectly on the computer but fails on iPad. The element suddenly jumps up at dragstart and then allows me to dr ...

cssjquery-ui

Unable to display button image when using both id and style class in CSS

During my transition from Java 7 to Java 8, I've encountered a peculiar issue. Here's a brief explanation: In my FXML file, I have a button defined with style class button-red-big and id btnInput: <Button id="btnInput" fx:id="btnInput" align ...

javacssjavafx-8fxml

Mozilla puts an end to the default behavior of parent anchor tags

I am working with HTML code. In my HTML, the parent element is an anchor tag and the child element is a dropdown. I am trying to prevent the parent's default behavior. For example, when a user clicks on the dropdown, I want to trigger the dropdown ...

javascriptjqueryhtml

Rotate the circular border in a clockwise direction when clicked

I have successfully designed a heart icon using SVG that can be filled with color upon clicking. Now, I am looking to add an outer circle animation that rotates clockwise around the heart as it is being created. Currently, the circle only spins in the code ...

javascriptcss

Obtain an HTML element using JavaScript

What is the best method to access the top-left cell of a table using JavaScript from a specified URL? For instance, in this URL: https://www.w3schools.com/jsref/dom_obj_table.asp In the 'Table Object Methods' section, I am interested in retriev ...

javascripthtmlangularjsprotractor

Using CSS to customize the appearance of the preview in CKEditor

After successfully integrating CKEditor into my website CMS, I am facing an issue with the Preview button not using stylesheets (CSS). Despite editing the preview.html file located in: Website/ckeditor/plugins/preview/ It appears that the CSS is being ig ...

javascripthtmlckeditorwysiwyg

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

css

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

javascripthtmlcssreactjsmaterial-ui

Arranging two list items (<li>) side by side in HTML code

I am currently designing a form with a side navigation bar that will display around 15-20 elements. Each element is represented by an <li> containing a link to open a modal when clicked. This is the current structure of my code: <div id="sidebar ...

htmlcss

When clicked, elevate the element to the top of the window with an offset

Is there a way to click on this button, which is located within an accordion section header, and have it automatically move to the top of the page based on the window size? It seems like it should be a simple task, but sometimes after a long day things ca ...

javascriptjqueryhtml