The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving this problem requires JavaScript knowledge. If it does, I can provide more information. Below is my CSS code:

/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}
// Rest of the CSS code...

/**
* Mobile Navigation 
*/
.navbar-mobile {
  display: none;
}

.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;

media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
// Rest of the CSS code...

And here is the HTML code:

<!-- ======= Header ======= -->
  <header id="header" class="fixed-top ">
    // HTML content...
</header><!-- End Header -->

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

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

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

javascripthtmlcss

Answer №1

Feel free to use this code snippet for your header design and adjust it as needed, as it is designed to be responsive.

$(document).ready(function() {
  // Toggle menu on click
  $("#menu-toggler").click(function() {
    toggleBodyClass("menu-active");
  });

  function toggleBodyClass(className) {
    document.body.classList.toggle(className);
  }

 });
/* Custom Styles */
$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;

body {
  background: $secondary;
  color: $ternary;
  font-size: 14px;
  margin: 0;
}

.logo {
  max-width: 200px;
}
.navbar {
  align-items: center;
  background: $primary;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
  padding: 10px 50px;
}

.push-left {
  margin-left: auto;
}

/* Menu */
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  outline: none;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 1000;
  @media screen and (max-width: 768px) {
    display: inline-block;
  }
  
  &-line {
    background: $ternary;
    height: 3px;
    position: absolute;
    left: 0;
    transition: all .2s ease-out; 
    width: 100%;
    
    .hamburger:hover & {
      background: #777;
    }
    
    &-top {
      top: 3px;
    }
    
    .menu-active &-top {
      top: 50%;
      transform: rotate(45deg) translatey(-50%);
    }
    
    &-middle {
      top: 50%;
      transform: translatey(-50%);
    }
    
    .menu-active &-middle {
      left: 50%;
      opacity: 0;
      width: 0;
    }

    &-bottom {
      bottom: 3px;
    }

    .menu-active &-bottom {
      bottom: 50%;
      transform: rotate(-45deg) translatey(50%);
    }
  }
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all .25s ease-in; 
  
  @media screen and (max-width: 768px) {
    background: $primary;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translatey(-100%);
    text-align: center;
    
    .menu-active & {
      transform: translatey(0%);  
      opacity: 1;
    }
  }
  
  .menu-item a {
    color: $dark;
    display: block;
    line-height: 30px;
    margin: 0px 10px;
    text-decoration: none;
    text-transform: uppercase;
    
    &:hover {
      color: lighten($dark, 20);
      text-decoration: underline;
    }

    @media screen and (max-width: 768px) {
      font-size: 20px;
      margin: 8px;
    }
  }
  
  
}

.sub-nav {
    border: 1px solid #ccc;
    display: none;
    position: absolute;
    background-color: $primary;
    padding: 5px 5px;
    list-style: none; 
    width: 230px;   
    @media screen and (max-width: 768px) {
      position: relative;
      width: 100%;
      display: none;
      background-color: rgba(0, 0, 0, 0.20);
      box-sizing: border-box;
    }
}

 .nav__link {
   &:hover + .sub-nav {
        display:block;

 }
}

.sub-nav {
  &:hover {
    display:block;
  }
}
<nav class="navbar">
  <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/2/23/AS_sample_logo.png" alt="LOGO"></div>
  <div class="push-left">
    <button id="menu-toggler" data-class="menu-active" class="hamburger">
      <span class="hamburger-line hamburger-line-top"></span>
      <span class="hamburger-line hamburger-line-middle"></span>
      <span class="hamburger-line hamburger-line-bottom"></span>
    </button>

    <!--  Menu compatible with wp_nav_menu  -->
    <ul id="primary-menu" class="menu nav-menu">
       <li class="menu-item "><a class="nav__link"  href="#">Home</a>  
      </li>     
      <li class="menu-item "><a class="nav__link"  href="#">About Us</a>  
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Our Team</a>  
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Our Offers</a>  
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Projects</a>  
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Careers</a>  
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Get In Touch</a>  
      </li>
    </ul>


  </div>
</nav>

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

Transforming a string into an object

I've been working on this code where my aim is to convert a string into an object and then display the data from an ajax call. However, it appears that using the string value in this way is not functioning as expected. var string = "first: 'Geor ...

javascriptjqueryajaxstringobject

Having difficulty accessing certain code in TypeScript TS

Struggling with a TypeScript if else code that is causing errors when trying to access it. The specific error message being displayed is: "Cannot read properties of undefined (reading 'setNewsProvider')" Code Snippet if (this.newsShow != ...

javascriptc#jquerytypescript

Using PHP variables in HTML frameset URL for dynamic content passing

Looking for help to pass a PHP variable through a frameset URL. I've been trying different techniques without success so far. Can anyone provide some guidance? Here is an example of my code and what I have attempted: <?php $var = 2+3 ?> < ...

phphtmlhtml-frames

Can anyone tell me where to locate the AndroidManifest.xml file within a React Native Expo project?

How can I locate the AndroidManifest.xml file in a React Native Expo project to request permissions? Are there alternative methods for asking users for permission? ...

javascriptreactjsreact-native

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

javascripthtmlcssangularjs

how to name a collection variable in MongoDB shell using JavaScript

When using the mongo shell with JavaScript, is it possible to dynamically set the collection name in order to work with multiple collections? db.collection.insert() ...

javascriptmongodbshell

Is there a way to determine if a browser's network activity is inactive?

Within an angularJS application, a noticeable delay can be experienced between the user and the server (potentially due to limited bandwidth), resulting in a wait time of approximately 2-500ms when loading a new page. I am considering implementing a metho ...

javascriptangularjsajaxweb-applications

Classic ASP offers a feature that allows users to select all checkboxes at once

I'm looking to create a functionality where there is a 'Select all' checkbox along with individual checkboxes for each database record. Is it possible to use JavaScript to ensure that when the 'Select all' checkbox is checked, all ...

javascriptasp-classiccheckboxselectall

Explore numerous databases using mongoosastic

Currently in my Node.js application, I am utilizing Mongoosastic to fetch data from ElasticSearch : Article.search({ "match_all": {} }, function (err, results) { console.log(results.hits.hits); Post.search({ "match_all": {} }, function (err, r ...

javascriptnode.jselasticsearchmongoosemongoosastic

Perform an action when the timer reaches zero

I am working with a database entry that contains the following information: { _id:"fdjshbjds564564sfsdf", shipmentCreationTime:"12:17 AM" shipmentExpiryTime:"12:32 AM" } My goal is to create a timer in the front end ...

javascripthtmlnode.jsreactjsweb

Angular model does not bind properly to Bootstrap 3 DateTimePicker after 'dp.change' event

I am currently implementing the Bootstrap 3 DateTimePicker plugin by eonasdan. While everything seems to be functioning correctly, I have encountered an issue with binding the selected date within the input field to Angular's ng-model. Whenever I make ...

javascriptangularjsbootstrap-datetimepickereonasdan-datetimepicker

do not continue loop if promise is rejected in AngularJS

I've attempted multiple methods, but still haven't found a solution to this issue. Within my code, there is a method called iterator that returns a promise; this method runs in a loop x number of times. If the iterator function returns a rejecte ...

javascriptangularjsfor-loopangular-promise

Would it be expected for these two JQuery functions to exhibit identical behaviors?

If I have the following two JQuery functions - The first one is functional: $("#myLink_931").click(function () { $(".931").toggle(); }); The second one, however, does not work as expected: $("#myLink_931").click(function () { var class_name = $(thi ...

javascriptjquery

Modify the main element of a component

Vue.js requires only a single root element for each component, which is typically wrapped in a div tag. However, this can lead to unexpected issues, such as breaking the layout when using Bootstrap and inserting a div between specific elements like <b-r ...

javascriptvue.js

Using addClass and fadeIn simultaneously when hovering over an element

After writing JavaScript code that utilizes the JQuery library to swap classes on hover, I noticed that the transition between background images was quite abrupt. The code functions as intended, but I would prefer to incorporate a fadeIn and fadeOut effect ...

javascriptjquery

Utilize AJAX to retrieve the output of a PHP randomizer

Current situation: I have a PHP file with a randomizer function and HTML that utilizes this function to display strings from a separate text document. The Function: <?php function rand_line($fileName, $maxLineLength = 4096) { $handle = @fopen($fileN ...

javascriptphpjqueryhtmlajax

Transfer information using cURL without the need to refresh the webpage

I am trying to send data to an external API using cURL from a Facebook iframe page (not tab). However, I want to achieve this without reloading the form page. My idea is to use jQuery AJAX to display a "submitting data" message upon form submission and sh ...

phpjavascriptajaxiframefacebook

React Router's default component for nested routes

In React Router, I am facing a challenge with nested Routes <Route path='about' component={{main: About, header: Header}}> <Route path='team' component={Team} /> </Route> Currently, the Team component is displayed ...

javascriptreact-routerreactjsjsx

Tips for clearing Nightwatch session storage efficiently

To ensure the pop-up functionality was working properly, I had to reset the browser's session storage. By doing this, the pop-up will reappear. Is there a way to clear the page's Session Storage in Nightwatch? ...

javascriptseleniumselenium-webdriverselenium-chromedrivernightwatch.js

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

My current project involves implementing token-based authentication using the MEAN stack. The goal of my application is to display different menu items based on whether a user is logged in or not. When there is no token present, the menu should show option ...

javascriptangularjs