What are the best methods for creating a fully responsive navbar?

After learning about responsive design and adapting pages for smaller screens, I'm struggling to make my navbar responsive by displaying the three bars instead of the full navbar.

This is my customized navbar:

Home
Services
At-Home Classes Group Classes Puppy Classes
About Us
Train With Us
Basic Training Advanced Training
Contact
Testimonials
FAQs
jqueryhtmlcssresponsive

Answer №1

Include max-width:100vw(viewport width) for the .navbar_maincontainer

Delete width:100% from the .navbar_link

:root {
  --main_color: #004771;
  --main_color_shade: #072060;
  --footer_color: #383838;
}

.navbar_maincontainer {
  max-width: 100vw;
  height: 50px;
  background-color: var(--main_color);
  display: flex;
  align-items: center;
  padding: 0px 100px;
  font-size: 17px;
}

.navbar_link_wrapper {
  width: auto;
  height: 100%;
  position: relative;
}

.navbar_link {
  color: white;
  font-size: 17px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 30px;
}

.navbar_link_wrapper:hover {
  background-color: var(--main_color_shade);
}

.navbar_sublinks_container {
  position: absolute;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  width: 300px;
  height: auto;
  left: 0px;
  top: -700px;
  transition: all 600ms ease;
  background-color: #383838;
  z-index: 9999999999;
  display: none;
  flex-direction: column;
}

.navbar_sublink {
  padding: 0px 15px;
  height: 50px;
  display: flex;
  align-items: center;
  transition: all 600ms ease;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
}

.navbar_sublinks_line {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: 1px;
  margin: 0 auto;
}

.navbar_sublinks_title {
  padding: 10px 0px;
  width: 100%;
  color: white;
  font-size: 13px;
}

.active {
  background-color: var(--main_color_shade);
}

.active_sub {
  background-color: rgba(0, 0, 0, 0.3);
}

.navbar_sublink:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.navbar_link_wrapper:hover .navbar_sublinks_container {
  display: flex;
  top: 100%;
}
<div class="navbar_maincontainer" style="">
  <div class="navbar_link_wrapper">
    <a class="navbar_link" href="/" style="" title="Home Page">Home</a>
  </div>
  <div class="navbar_link_wrapper" style="margin-left:auto;">
    <a class="navbar_link" href="/classes" style="" title="Our dog training packages in Málaga">Services</a>
    <div class="navbar_sublinks_container" style=" ">
      <a class="navbar_sublink" href="/classes/home" style="">In-home classes</a>
      <a class="navbar_sublink @if($pageInfo['submenu_active']=='Group Classes')active_sub @endif" href="/classes/group" style="">Group classes</a>
      <a class="navbar_sublink" href="/classes/puppies" style="">Puppy classes</a>
    </div>
    <div class="navbar_link_wrapper" style="">
      <a class="navbar_link" href="/about-us" style="" title="Get to know the Costadog team">About Us</a>
    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/train-with-us" title="Become a dog trainer">Train with us</a>
      <div class="navbar_sublinks_container">
        <a class="navbar_sublink" href="/train-with-us/basic-training">Basic Training</a>
        <a class="navbar_sublink" href="/train-with-us/advanced-training">Advanced Training</a>
      </div>
    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/contact" style="" title="Reach out to our expert trainers">Contact</a>

    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/client-testimonials" title="Testimonials from our clients">Testimonials</a>
    </div>
    <div class="navbar_link_wrapper">
      <a class="navbar_link" href="/faqs" title="Frequently asked questions">FAQs</a>
    </div>
  </div>

Answer №2

 const selectElement =(element)=>document.querySelector(element);
   selectElement('.mobile-menu').addeEventListner('click',()=>{
     selectElement('header').classList.toggle('active');
   })
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
}
html {
  font-size: 10px;
  font-family: "SF Pro Display", sans-serif;
}
a {
  display: block;
  text-decoration: none !important;
}
.container {
  max-width: 98rem;
  margin: 0 auto;
  padding: 0 2.2rem;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1400;
  width: 100%;
  height: 4.4rem;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2rem);
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -1rem;
}

.nav-list-mobile {
  display: none;
}

...
            </ul>

Answer №3

<div class="nav-container">
  <nav>
    <ul class="mobile-nav">
      <li>
        <div class="menu-icon-container">
          <div class="menu-icon">
            <span class="line-1"></span>
            <span class="line-2"></span>
          </div>
        </div>
      </li>

      <li>
        <a href="#" class="link-logo"></a>
      </li>

      <li>
        <a href="" class="link-bag"></a>
      </li>
    </ul>

    <ul class="desktop-nav">
      <li>
        <a href="#" class="link-logo"></a>
      </li>
      <li>
        <a href="#">Mac</a>
      </li>
      <li>
        <a href="#">iPad</a>
      </li>
      <li>
        <a href="#">iPhone</a>
      </li>
      <li>
        <a href="#">Watch</a>
      </li>
      <li>
        <a href="#">TV</a>
      </li>
      <li>
        <a href="#">Music</a>
      </li>
      <li>
        <a href="#">Support</a>
      </li>
      <li>
        <a href="#" class="link-search"></a>
      </li>
      <li>
        <a href="#" class="link-bag"></a>
      </li>
    </ul>
  </nav>

  <!-- End of navigation menu items -->

  <div class="search-container hide">
    <div class="link-search"></div>
    <div class="search-bar">
      <form action="">
        <input type="text" placeholder="Search apple.com">
      </form>
    </div>
    <div class="link-close"></div>

    <div class="quick-links">
      <h2>Quick Links</h2>
      <ul>
        <li>
          <a href="#">Visiting an Apple Store FAQ</a>
        </li>
        <li>
          <a href="#">Shop Apple Store Online</a>
        </li>
        <li>
          <a href="#">Accessories</a>
        </li>
        <li>
          <a href="#">AirPods</a>
        </li>
        <li>
          <a href="#">AirTag</a>
        </li>
      </ul>
    </div>
  </div>


  <div class="mobile-search-container">
    <div class="link-search"></div>
    <div class="search-bar">
      <form action="">
        <input type="text" placeholder="Search apple.com">
      </form>
    </div>
    <span class="cancel-btn">Cancel</span>

    <div class="quick-links">
      <h2>Quick Links</h2>
      <ul>
        <li>
          <a href="#">Visiting an Apple Store FAQ</a>
        </li>
        <li>
          <a href="#">Shop Apple Store Online</a>
        </li>
        <li>
          <a href="#">Accessories</a>
        </li>
        <li>
          <a href="#">AirPods</a>
        </li>
        <li>
          <a href="#">AirTag</a>
        </li>
      </ul>
    </div>
  </div>
  

</div>

<div class="overlay"></div>
        
<script src="main.js"></script>

Answer №4

const searchButton = document.querySelector("nav .desktop-nav .link-search");
const closeButton = document.querySelector(".search-container .link-close");
const desktopNav = document.querySelector(".desktop-nav");
const searchContainer = document.querySelector(".search-container");
const overlay = document.querySelector(".overlay");

searchButton.addEventListener("click", () => {
    desktopNav.classList.add("hide");
    searchContainer.classList.remove("hide");
    overlay.classList.add("show");
})

closeButton.addEventListener("click", () => {
    desktopNav.classList.remove("hide");
    searchContainer.classList.add("hide");
    overlay.classList.remove("show");
})

overlay.addEventListener("click", () => {
    desktopNav.classList.remove("hide");
    searchContainer.classList.add("hide");
    overlay.classList.remove("show");
})


// Mobile Version

const menuIconContainer = document.querySelector("nav .menu-icon-container");
const navContainer = document.querySelector(".nav-container");

menuIconContainer.addEventListener("click", () => {
    navContainer.classList.toggle("active");
})


const searchBar = document.querySelector(".mobile-search-container .search-bar");
const nav = document.querySelector(".nav-container nav");
const searchInput = document.querySelector(".mobile-search-container input");
const cancelBtn = document.querySelector(".mobile-search-container .cancel-btn");

searchInput.addEventListener("click", () => {
    searchBar.classList.add("active");
    nav.classList.add("move-up");
    desktopNav.classList.add("move-down");
})

cancelBtn.addEventListener("click", () => {
    searchBar.classList.remove("active");
    nav.classList.remove("move-up");
    desktopNav.classList.remove("move-down");
})
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    overflow-y: scroll;
}

/* Desktop Nav */

.nav-container ...
...
...


        <div class="mobile-search-container">
            <div class="link-search"></div>
            <div class="search-bar">
                <form action="">
                    <input type="text" placeholder="Search apple.com">
                </form>
            </div>
            <span class="cancel-btn">Cancel</span>

            <div class="quick-links">
                <h2>Quick Links</h2>
                <ul>
                    <li>
                        <a href="#">Visiting an Apple Store FAQ</a>
                    </li>
                    <li>
                        <a href="#">Shop Apple Store Online</a>
                    </li>
                    <li>
                        <a href="#">Accessories</a>
                    </li>
                    <li>
                        <a href="#">AirPods</a>
                    </li>
                    <li>
                        <a href="#">AirTag</a>
                    </li>
                </ul>
            </div>
        </div>
        

    </div>


    <div class="overlay"></div>

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

Obtain an array as the response from an Ajax call

When passing data using Ajax request, I utilize the code below: var query = { "username" : $('#username').val(), "email" : $('#email').val(), } $.ajax({ type : "POST", url : "system/process_registration.php", ...

javascriptphpjquerymysqlajax

What is the method for retrieving the input text value contained within a select option?

I have encountered an issue in my HTML template where I am unable to retrieve the value within the input field upon submitting, especially if a custom category name was entered. The code includes an HTML <select> and <input> fields: {% for i ...

javascriptjqueryhtml

Challenges with Opacity and Blending Techniques in Web Development

I am in the process of developing a website to compile and organize information for my personal use. Strangely, one of my divs is overlapping with another div even though it has a higher z-index. I suspect that this issue might be related to the hierarchy ...

htmlcss

retrieve information provided by the user

When a user inputs a date into #dateUserInput and clicks the button, I want the fetch function to retrieve the appropriate image for that date. However, an error occurs: VM113:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at getimag ...

javascripthtml

Transferring a button value in JavaScript to a function for generating a localStorage variable

Managing a survey web app at my workplace requires me to gather data from customers. I am in the process of simplifying multiple functions (one for each option) into one seamless function. The "votes" are stored as localStorage variables, allowing the surv ...

javascripthtmllocal-storage

Resolving JavaScript animation delays in background tabs with instantaneous correction

Currently, I have a fiddle showcasing two pulsing animations that run at different timings. http://jsfiddle.net/JuFxn/16/ The code snippet for the pulse effect can be found within the fiddle itself. function fadeItIn() { var child; child = 4; setTimeou ...

javascriptjqueryanimationsettimeout

Improving Rails coupling by integrating AJAX

I am currently in the process of developing a small blog application to enhance my skills with Rails. This app will allow users to log in, create posts, and comment on other users' posts. As of now, I am working on integrating Ajax into the 'add ...

jqueryruby-on-railsajaxcoupling

Encountering issues with both jCarousel and Thickbox functionalities

My code is showing an error message that says "$ is not defined." I found this code on the jCarousel site to use with Thickbox, but it's not working for me. I can't seem to figure out what's causing the issue. Can someone please help me tro ...

jqueryasp.netthickbox

The text inside the table-column is not automatically resizing to fit the

View Screenshot Note: This application does not work in Internet Explorer. I need a solution that is compatible with Chrome and Firefox. I am using dynamic code (velocity-spring) to create an HTML table. The number of columns varies, so I cannot set widt ...

javascriptjqueryhtmlcss

Determine the overall sum following the modification of rows

Need assistance with calculating the Grand Total of all rows to display at the bottom of a table using JQuery 1.9. Below is the JavaScript code: <script language="javascript"> $(".add_to_total").on('change', function() { var total = 0; $( ...

javascriptjquery

What is the Best Way to Toggle the Visibility of Specific Buttons in a Table Using Jquery?

<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...

javascriptjqueryhtml

Navigating to the bottom of a specific element by scrolling

I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window. The functionality ...

javascripthtmlcssscroll

Validate input JQuery only when specific radio buttons are chosen

My form currently has basic validation set up like this: <script type="text/javascript"> $(function() { $("#postform").validate({ rules: { ...

javascriptjqueryvalidation

Utilizing nested flexboxes to create a horizontal row within a vertical column

As I work on creating a mock survey form, I've organized the input fields in a column flex-box layout. However, I'm facing an issue with the name field where I want to split it between 'first' and 'last' names while sharing th ...

htmlcssflexbox

Navigate down to the bottom of the element located on the webpage

I'm trying to create a feature where clicking an anchor tag will smoothly scroll to a specific element on the page. Currently, I am using jquery scrollTo for this purpose. Here's the code snippet: $.scrollTo( this.hash, 1500, { easing:&apos ...

javascriptjquerypluginsscroll

Apply a watermark specifically to fancybox for images in galleries, excluding non-gallery items

I recently encountered an issue with a FancyBox image gallery on my webpage. I wanted to add a watermark to the gallery items, so I followed an example from the FancyBox page at http://jsfiddle.net/w5gQS/. beforeShow: function () { $('<div class=" ...

javascriptjqueryhtmlcssfancybox-2

ID is not receiving the CSS styles

I'm having trouble applying my CSS to a specific img ID element on the page. I've been trying to solve this for about 30 minutes with no luck. The strange thing is, I have two other elements with the same HTML and CSS that are working correctly. ...

htmlcss

What sets apart custom events from postMessage?

If you want to send a message to another document, such as an iframe, there are two functions you can use - postMessage and createEvent. Consider the following: var event = document.createEvent('CustomEvent'); event.initCustomEvent("message", tr ...

javascripthtmlpostmessagecustom-events

Is it possible to eliminate any leftover comments from a JSON string using jQuery and Ajax?

Having an issue with a framework that generates invalid JSON String like this: /* { "myobject" : "test"} */ The problem lies in the comments before and after the json string. This is done for security purposes, as it's not recommended to return JSON ...

javascriptajaxjquery

The loading of CSS styles is inconsistent across all pages in node.js

Currently, I am in the process of building a basic blog from scratch to enhance my knowledge of node.js + express. However, I have encountered a roadblock when attempting to access a nested directory, resulting in the styles not loading. For instance: app ...

cssnode.jsexpress