Display issue with the responsive navigation bar

Question

Display issue with the responsive navigation bar

I am currently facing challenges while trying to create a responsive navigation bar. The way it is displayed on the page is not what I intended.

Below is an image of how it appears when the window is maximized:

https://i.sstatic.net/6NogJ.png

And here is how it looks when the window is resized:

https://i.sstatic.net/Fv6rv.png

This is the desired layout and functionality that I am aiming for:

https://i.sstatic.net/EPAEW.jpg

Current Issues:

The current display of links in the header, shown as "stretches, mobility" etc., should actually show "Join / Log In", as seen in Image 3.
Upon clicking on the menu, the navigation should dynamically display other links.

So far, I have attempted the following: https://jsfiddle.net/hudnybux/

javascript jquery html css responsive-design

Answer 1

Answer №1

After some adjustments, I was able to replicate the look of your screenshots almost perfectly. One important change I made was repositioning your nav-trigger element higher up in the HTML structure.

<div id="header-main">
    <div id="nav-trigger"><span>Menu</span></div>
    <nav id="main-navigation" role="navigation">
        <ul>
            <li><a href="#">Stretches</a></li>
            <li><a href="#">Mobility</a></li>
            <li><a href="#">Posture</a></li>
        </ul>
    </nav>
    <!--<nav id="nav-mobile"></nav>-->
</div>

I also removed the need for the nav-mobile navigation and adjusted the caret triangle next to "menu" by setting its width and height to 0.

width: 0;
height: 0;

Edit:

Upon further review, I have a new suggestion. Instead of using jQuery's slideDown and slideUp, consider implementing CSS transitions for dynamic animations. By simply applying a class, you can achieve the desired effect with more flexibility compared to inline styling from jQuery methods.

https://jsfiddle.net/qnco3x7e/8/

Answer 2

After some adjustments, I was able to replicate the look of your screenshots almost perfectly. One important change I made was repositioning your nav-trigger element higher up in the HTML structure.

<div id="header-main">
    <div id="nav-trigger"><span>Menu</span></div>
    <nav id="main-navigation" role="navigation">
        <ul>
            <li><a href="#">Stretches</a></li>
            <li><a href="#">Mobility</a></li>
            <li><a href="#">Posture</a></li>
        </ul>
    </nav>
    <!--<nav id="nav-mobile"></nav>-->
</div>

I also removed the need for the nav-mobile navigation and adjusted the caret triangle next to "menu" by setting its width and height to 0.

width: 0;
height: 0;

Edit:

Upon further review, I have a new suggestion. Instead of using jQuery's slideDown and slideUp, consider implementing CSS transitions for dynamic animations. By simply applying a class, you can achieve the desired effect with more flexibility compared to inline styling from jQuery methods.

https://jsfiddle.net/qnco3x7e/8/

Answer 3

Answer №2

To achieve the desired layout on smaller screens, consider including an additional media query

@media all and (max-width: 460px) {
  nav#main-navigation li {
    display:block;
    border-bottom: 1px solid #fafafa;
  }
}

Answer 4

To achieve the desired layout on smaller screens, consider including an additional media query

@media all and (max-width: 460px) {
  nav#main-navigation li {
    display:block;
    border-bottom: 1px solid #fafafa;
  }
}

Answer 5

Answer №3

Utilizing flexbox CSS properties can greatly enhance your website layout capabilities. Check out this helpful resource for more information:

Answer 6

Utilizing flexbox CSS properties can greatly enhance your website layout capabilities. Check out this helpful resource for more information:

Answer 7

Answer №4

Assisting others with their code is not typically encouraged on Stack Overflow, but in the spirit of teaching through demonstration, I took the liberty of completing the task for you. Take note of the changes I made to your implementation and try to learn as much as you can from it!

The Approach

Maintain consistent HTML markup for the main menu (Stretches, Mobility, Posture) across different screen sizes instead of using JavaScript to duplicate it.
Start off with the same CSS styling for both menus; adjust the main menu to be horizontal in the media query for smaller screens.
Show everything by default and only use display: none on specific screen sizes where certain elements should not be displayed.

JSFiddle link

$(document).ready(function() {
    $("#main-nav-mobile-trigger span").click(function() {
        $(this).toggleClass("open");
        if ($(this).hasClass("open")) {
            $("#main-nav").addClass("open").slideDown(250);
        } else {
            $("#main-nav").removeClass("open").slideUp(250);
        }
    });
});

.pageOverlay {
    width: 900px;
    margin: 0 auto;
}

/* Remaining CSS styles provided in the original snippet */

The HTML Structure

I removed unnecessary container divs (#header and #header-main) since they didn't contribute to the layout.
The header area now consists of three parts:
- #top-nav - Join/Login, Help, Shop links
- #main-nav-mobile-trigger - MENU button
- #main-nav - Stretches, Mobility, Posture menu items

The JavaScript Logic

Upon clicking the MENU button (#main-nav-mobile-trigger span):
- Toggle the presence of the .open class.
- If the class is added,
  - Apply the .open class to #main-nav and slide it down.
- Otherwise,
  - Remove the .open class from #main-nav and slide it up.

The Styling Guidelines

Avoid redundant styling rules for multiple horizontal menus by consolidating them under a general selector like nav.
For large screens (>900px):
- Right-align #top-nav and left-align #main-nav.
- Hide the MENU button.
For small screens (<=900px):
- If #main-nav doesn't have the .open class, hide it.
- Display menu items in #main-nav horizontally.

Hopefully, this explanation proves beneficial for your understanding. All the best as you delve into more front-end development challenges!

Answer 8

Assisting others with their code is not typically encouraged on Stack Overflow, but in the spirit of teaching through demonstration, I took the liberty of completing the task for you. Take note of the changes I made to your implementation and try to learn as much as you can from it!

The Approach

Maintain consistent HTML markup for the main menu (Stretches, Mobility, Posture) across different screen sizes instead of using JavaScript to duplicate it.
Start off with the same CSS styling for both menus; adjust the main menu to be horizontal in the media query for smaller screens.
Show everything by default and only use display: none on specific screen sizes where certain elements should not be displayed.

JSFiddle link

$(document).ready(function() {
    $("#main-nav-mobile-trigger span").click(function() {
        $(this).toggleClass("open");
        if ($(this).hasClass("open")) {
            $("#main-nav").addClass("open").slideDown(250);
        } else {
            $("#main-nav").removeClass("open").slideUp(250);
        }
    });
});

.pageOverlay {
    width: 900px;
    margin: 0 auto;
}

/* Remaining CSS styles provided in the original snippet */

The HTML Structure

I removed unnecessary container divs (#header and #header-main) since they didn't contribute to the layout.
The header area now consists of three parts:
- #top-nav - Join/Login, Help, Shop links
- #main-nav-mobile-trigger - MENU button
- #main-nav - Stretches, Mobility, Posture menu items

The JavaScript Logic

Upon clicking the MENU button (#main-nav-mobile-trigger span):
- Toggle the presence of the .open class.
- If the class is added,
  - Apply the .open class to #main-nav and slide it down.
- Otherwise,
  - Remove the .open class from #main-nav and slide it up.

The Styling Guidelines

Avoid redundant styling rules for multiple horizontal menus by consolidating them under a general selector like nav.
For large screens (>900px):
- Right-align #top-nav and left-align #main-nav.
- Hide the MENU button.
For small screens (<=900px):
- If #main-nav doesn't have the .open class, hide it.
- Display menu items in #main-nav horizontally.

Hopefully, this explanation proves beneficial for your understanding. All the best as you delve into more front-end development challenges!

Display issue with the responsive navigation bar

Answer №1

Answer №2

Answer №3

Answer №4

The Approach

JSFiddle link

The HTML Structure

The JavaScript Logic

The Styling Guidelines

Similar questions

What is causing the error when trying to parse a JSON with multiple properties?

Enhancing search results with data retrieved from a jSON response

Accidental delay upon mouse exit

Encountered an Angular 1.6 Error: The requested URL at http://127.0.0.1:56035/[url] could not be found (404

The functionality of cloning an object is experiencing issues on a webpage containing jQuery code generated by a PHP script

When using AutoComplete in MUI, I encountered an issue while attempting to assign a default value to the checkbox from an API. Instead of achieving the desired result, I received an error stating "(inter

How can I eliminate the default background of Mui tooltip and personalize it in react?

Access an external URL by logging in, then return back to the Angular application

The Route.get() function in Node.js is expecting a callback function, but instead received an unexpected object of type

Stay connected with AJAX's latest updates on Twitter with just 13 bytes

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

The lathegeometry in Three.js is causing incorrect rendering of faces

Comparing the use of Next.js API routes to Express.js API

Unable to include below the heading for the images

"Reconfigure web page layout to be perfectly centered

A rapid tool for efficient HTML parsing based on libxml

I aim to have just the footer section perfectly aligned within the screen, without the entire body extending beyond

Web API 2 failing to deserialize JSON data

does not output any console log statements

JavaScript has the ability to sort tables using tags