The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it.

If you'd like to see the problem in action, I have set up a JSFiddle to demonstrate it: JSFiddle

Below is a snippet of the code (the full code is available in the fiddle):

HTML:

<header class="header">
    <div id="logo"> <a href="#top">
        <img src="http://lorempixel.com/125/25/abstract" alt="Logo"/>
            </a>
    </div>
    <nav class="main-nav">
        <ul>
            <li><a href="#projects">Projects</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
        <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x"> <span class="lines"></span>

        </button>
    </nav>
    <!-- main-nav -->
</header>

CSS:

.main-nav ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.main-nav ul.is-visible {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}

Answer №1

Take a look at this link: http://jsfiddle.net/5ydhgxay/3/

When the '.lines-button' is clicked, the following JavaScript function is triggered:
$('.lines-button').on('click', function (event) {
        $('.header').toggleClass('absolute');
        $('.main-nav').children('ul').slideToggle(500);
    });

Custom CSS Styles:

.main-nav ul {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    margin:0;
    display:none;
}

Answer №2

The solution to this problem lies in understanding Z-index, a CSS property that determines the stacking order of elements. If you wish for the navigation bar to be displayed on top, include the following code:

.main-nav {
    z-index: 1;
}

Answer №3

Make sure to close the header section right after the logo div, and include the given CSS code snippet :

.menu-button {    
    position: absolute;
    z-index: 10000; 
}

JSFiddle Link

Answer №4

I enclosed all content in the header within a div except for the navigation section, and applied a background color to that div to mimic the menu's appearance.

HTML:

<header class="header">
    <div class="header-wrapper">
        <div id="logo">
            <a href="#top">
                <img src="img/logo.svg" alt="Logo">
            </a>
        </div>

        <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x">
            <span class="lines"></span>
        </button>
    </div>

    <nav class="main-nav">
        <ul>
            <li><a href="#projects">Projects</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>
    <!-- main-nav -->
</header>

CSS:

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 1000;
    background-color: rgba(255,255,255,.95);
}

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

Embed watermark on the Username and Password fields of asp:Login control

Seeking help to watermark the Username and Password fields of asp:Login controls using jQuery, I have attempted different methods to reference the control ID: $('#<%=ClientID.Login1_UserName %>').watermark('watermark', 'User ...

What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results. main.css h1 { font-family: 'Shadows Into Light', serif; src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light"); font-size: 4 ...

When is it appropriate to utilize props and CSS in customizing Material UI components?

As a beginner with Material UI, I'm curious about when to use props within the .jsx script and when to utilize CSS in a separate stylesheet to style MUI elements. Is it necessary to still incorporate CSS stylesheets for MUI elements or is it preferabl ...

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

Troubleshooting a JQuery AJAX Autocomplete problem involving PHP and MySQL

I am facing an issue with my autocomplete feature. It is functioning properly on one of my pages, but not on this particular page. Even though the correct number of entries is being retrieved, they all appear to be "blank" or are displayed in black text th ...

Offspring of div should have equal height without the top and bottom padding

Looking to ensure that the height of child divs matches the height of the parent divs. Currently, the divs expand as the page is resized. This is for search results, so there are multiple identical code blocks. function matchHeight() { $result = $(&a ...

Toggle button color on click by using ng-click on a different button

As a newcomer to Angular, I am facing an issue. I have two buttons - button1 and button2. What I want is that when I click on button1, its color changes from green to red. Then, when I click on button2, the color of button1 should revert back to green. How ...

Module not found in Node.js environment (webpack)

I seem to be encountering an issue with loading any modules. Despite reinstalling my operating system, I continue to face the same error when attempting to use any module. I have tried reinstalling node, clearing the cache, and more. To view the code, pl ...

What steps should I take to have a button initiate an AJAX request?

One of the tasks on my list involves a textbox and a button for interaction. Once text is entered into the textbox, I intend to trigger an AJAX request by clicking the button. The purpose of this AJAX call is to extract the text input and incorporate it i ...

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

I've been attempting to utilize the jquery table sorter plugin, but I keep encountering an error when trying to sort the table. The error message I'm receiving is: cannot read property '1' of undefined This is the HTML code I have: ...

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

Samsung Galaxy S7 can interpret alphabetical parameters as numbers in a link sent via SMS

When trying to open a text message with a new message on my website using a link, I encountered an issue specifically with the Galaxy S7. The following code works on most Android phones: sms:5555555555?body=JOIN However, on the Galaxy S7, the "?body=JOIN ...

Discovering the world of Javascript and JQuery by diving into the intricacies of

Similar Question: Formatting dates using Javascript I have recently started working with JavaScript and jQuery. I am currently experimenting with creating a page that retrieves data from a public Google calendar and displays the events, including star ...

Error: This value is not a valid HTMLInputElement type (Google Maps)

When attempting to create a basic autocomplete field for Google Map places, I encountered the following error message despite having an HtmlInputElement as my field InvalidValueError: not an instance of HTMLInputElement Here is the HTML code: <inpu ...

reversed json using javascript

Is it possible to efficiently reverse the order of the following JSON object: { "10": "..." "11": "...", "12": "...", "13": "...", "14": "...", } so that it becomes: { "14": "...", "13": "...", "12": "...", "11": "... ...

JavaScript pause until the DOM has been modified

My current situation involves using a JavaScript file to make changes to the DOM of a page by adding a navigation menu. Following this code, there is another function that further modifies the newly added navigation menu. However, I am facing an issue wher ...

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

<div ng-show="IsExists" ng-cloak> <span>The value is present</span> </div> After that, I included the following lines in my app.css file However, the initial flickering of the ng-show block persists [ng\:cloak], [ng-cloak], ...

As the height is expanded, the background color gradually infiltrates the body of the page

I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expa ...

What is the best way to ensure uniformity in my boxes (addressing issues with whitespace and box-sizing using flexbox)?

Below is the code I have written: body { padding-top: 20px; text-align: center; background-color:black; } h1 { display: inline-block; background: white; } h1 { font-size: 30px } p { background: yellow; } .container { display: flex; ...

Once the Json content is loaded into the array, proceed to append

I am facing an issue with my ajax function that loads thumbnails. The function is being called by another ajax function, and the parameter is retrieved from there in the loop. I have attempted to wait for the ajax call to finish using .done and .ajaxCompl ...