What is the best way to keep my bottom navigation bar attached to my top navigation bar?

I am facing an issue with my two navbars. The top navbar sticks to the top of the page when the user scrolls down, which works perfectly fine. However, when the user logs in, the bottom navbar becomes visible. Unfortunately, the bottom navbar is not sticky and disappears when scrolled down. Is there a way to make the bottom navbar stick to the top navbar when scrolled down?

Link to the code snippet

.second_fixed_menu {
 border-color: rgba(91, 172, 220, 0.95);
 margin-top: 63px;
}

.second_fixed_menu .sub_menu {
 float: right;
}
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To make the bar fixed, you can use the following CSS code:

.second_fixed_menu .sub_menu {
  position: fixed; /* add position fixed */
  width: 100%; /* set width to 100%*/
  text-align: right; /*add text align right*/
  /* float: right */ /*no need for this anymore */
}


.navbar.innerpage {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  height: 10vh;
  background-color: #1c5c82;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}
.res_title {
  font-size: 35px;
  font-weight: bold;
  margin: 0;
}
.second_fixed_menu {
  /*background-color: rgba(91, 172, 220, 0.95);*/
  border-color: rgba(91, 172, 220, 0.95);
  /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);*/
  margin-top: 63px;
}
.second_fixed_menu .sub_menu {
  position: fixed;
  width: 100%;
  text-align: right;
}
.res_title {
  font-size: 35px;
  font-weight: bold;
  margin: 0;
}
.second_fixed_menu .sub_menu a {
  color: #fff;
  color: #1c5c82;
  display: inline-block;
  font-weight: bold;
  padding: 0 16px;
  font-family: Assistant, sans-serif;
  font-size: 16px;
}
.sub_menu a.current {
  color: #0d2839;
}
.second_fixed_menu .sub_menu a:hover {
  /*   background: #e2e2e2 none repeat scroll 0 0;*/
  color: #2884ba;
}
.navbar.innerpage {
  height: 60px;
}
<div class="site-content">

  <div class="innerpage navbar w-nav" data-animation="over-right" data-collapse="medium" data-contain="1" data-doc-height="1" data-duration="400">

    <div class="w-container">

      <a class="brand w-nav-brand" href="">
        <img class="logo" src="">
      </a>

      <nav class="nav-menu w-nav-menu" role="navigation"><a class="nav-link w-nav-link" href="index.html" style="max-width: 940px;">Home</a>
        <a class="nav-link w-nav-link" href="orientations.html" style="max-width: 940px;">Orientations</a>
        <a class="nav-link w-nav-link" href="profiles.html" style="max-width: 940px;">Profiles</a>
        <a class="nav-link w-nav-link " href="assessment.php" style="max-width: 940px;">Assessment</a>
        <a class="nav-link w-nav-link " href="join.html" style="max-width: 940px;">Join</a>
        <a class="nav-link w-nav-link" href="login.php" style="max-width: 940px;">Login</a>
      </nav>

      <div class="w-nav-button">

        <div class="menu-icon w-icon-nav-menu"></div>

      </div>

    </div>

    <div class="w-nav-overlay" data-wf-ignore=""></div>

  </div>


  <div class="second_fixed_menu">



    <div class="w-container">



      <div class="sub_menu">



        <a href="result.php" class="current">RESULT</a>

        <a href="my_profile.php">USER PROFILE</a>

        <a href="http://198.1.111.21/~wwwlancebitner/demo1/blog/">BLOG</a>

        <a href="inform_research.php">INFORM RESEARCH</a>

        <a href="">LINK</a>



      </div>


    </div>


  </div>

  <br/>

Answer №2

After careful investigation, I have identified a viable solution.

To resolve the issue, simply eliminate the margin-top: 63px from the .second-fixed-menu class and insert the following code:

position: fixed;
top: 63px;
left: 0px;

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 the value of an element from the Ajax response

Just starting out with Jquery and Ajax calls - here's what I've got: $(document).ready(function () { $.ajax({ type: "GET", url: "some url", success: function(response){ console.log(response); } }) }); Here's the ...

javascriptjqueryajax

ASP.net is encountering difficulty locating a specific JavaScript function

Seeking assistance to comprehend the issue, I have devoted countless hours scouring Google for a resolution. Current tools in use: ASP.NET entity framework Within a view, the following code is utilized: <button type="button" id="btnGraf ...

javascriptjqueryasp.net-mvc-4

Beware, search for DomNode!

I attempted to create a select menu using material-ui and React const SelectLevelButton = forwardRef((props, ref) => { const [stateLevel, setStateLevel] = useState({ level: "Easy" }); const [stateMenu, setStateMenu] = useState({ isOpen ...

javascriptreactjsmaterial-uireact-hooksuse-ref

I attempted to post a collection of strings in ReactJS, only to receive a single string response from the Web

I was troubleshooting an issue where only one string from ReactJS was being sent to WebApi instead of an array of strings. Below is the ReactJS code snippet I used: import React, { useState } from "react"; import axios from "axios"; e ...

javascriptreactjswebapi

"Learn how event bubbling in jQuery works with the use of .delegate() or .live() methods

After numerous attempts to simplify a code execution, I find myself struggling with loading DOM objects from the server using the .load() function. Specifically, I am encountering issues with implementing a datepicker plugin called jdpicker on an input tex ...

javascriptdomjqueryevent-delegation

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

I have a functioning code snippet, but it seems to be missing a crucial part when dealing with URLs such as www.mysite.com/home/. It works perfectly fine if the URL ends with index.aspx, like www.mysite.com/home/index.aspx, but fails when that part is omit ...

javascriptjqueryhtmlurlwindow.location

transforming JSON into CSV structure

I am attempting to utilize a JSON file as input data. Below is an excerpt of sample data. [ { id: 1671349531, name: "A Wild Restaurant Expansion", blurb: "We are looking to expand from our current location to a new and better facility...", goal: 17000, pl ...

javascriptjsonrcsv

To enable RTL in TextField, please note that the JssProvider is only available in "react-jss/src/JssProvider" and not in "react-jss/lib/JssProvider"

Seeking help to convert LTR to RTL in the following code: <TextField id="date" label="EmployeeDate" type="date" onChange= ...

javascriptreactjsmaterial-ui

Utilizing AJAX and PHP POST to dynamically refresh innerHTML content with MySQL data updates

I've been trying to solve this problem for a long time now, and I've reached a point where I can't seem to figure it out. On a page, there are several forms where users input different information that gets submitted to a mySQL database usin ...

phpjavascriptmysqlajaxinnerhtml

The Firefox extension is unable to activate any click events

Currently, I am developing a Firefox add-on with the goal of automatically filling in login form fields and submitting the login. For each website, I have access to various identifiers such as ids, classes or xpath, depending on what is provided by the web ...

javascriptjqueryfirefox-addon

Is there a way to prevent a 'keyup' event from being triggered by a 'keydown' event?

I have a tool that resolves zip codes and I am currently utilizing a keyup event handler to trigger a server query once the input length reaches 5 characters. However, I want to prevent unnecessary calls to the script, so I am exploring the possibility o ...

javascriptjqueryjquery-events

How can a full-screen background image be created in Next.js?

To achieve a full height display in both the html and body tags, how can we do this within a next.js component? Check out [1]: https://i.stack.imgur.com/K1r9l.png [2] Visit: https://www.w3schools.com/howto/howto_css_full_page.asp "mainImage.jsx" import ...

htmlcssreactjsnext.js

CSS3 flip effect on hover and click causing issues

I have successfully implemented a card flip effect using CSS3. The card is flipped using jQuery and CSS CSS .flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transfor ...

jqueryhtmlcsscss-transitions

Iterating over an object while omitting certain elements

Is there a way to insert a separator at a specific position in JSX? For example, I have a list that displays text when an item is clicked: https://i.sstatic.net/s71yE.png Here is the code: <Accordion> {items.map((item, index) => ( <Acco ...

javascriptreactjsjsxslice

A way to insert a line break in an HTML document without using the <br> tag is

<div id="unique_1" class="unique" style={{display:"flex"}} > <div class="item1">11</div> <div class="item2">77</div> <div class="item3">22</div&g ...

cssreactjsflexboxinline

vuex: The decision between using $store.commit and directly calling the function

Recently, I discovered an interesting technique where store mutation functions can be passed into HTML events. Here's an example: //In the template <input name="the_field" :value="the_field" @input="updateField"/> // In the component methods ...

javascriptvue.jsvuex

Interacting with local data using Express server

I am currently in the process of developing a web application for my web art class using Node.js with npm and Express. The concept behind the site is to have the entire body colored in one solid color, but allow users to text a hexcode/CSS color to a Twili ...

javascriptjqueryhtmlnode.jsexpress

Display a thumbnail image using a v-for loop

Looking for help with implementing a photo preview in my code using BootstrapVue. The Vue devtools show that the form-file contains the image, but my 'watch' isn't functioning properly. Any assistance would be greatly appreciated! Here is ...

javascriptvue.jsvuejs2bootstrap-vue

A step-by-step guide on extracting multiple data entries from JSON that correspond to an array of IDs

Within my JavaScript code, I am working with a JSON dataset containing posts, each with a unique post_id. I also have an array of specific post_ids that I want to use to extract certain posts from the main dataset. const dataset = [ {post_id: 1, titl ...

javascriptjsonecmascript-6

CSS and JavaScript issues causing compatibility errors with Internet Explorer

Recently, I've been working on a portfolio website just for fun, and I'm encountering compatibility issues specifically in Internet Explorer. Surprising, right? The issue seems to be stemming from the flipcard.css and flipcard.js files. While oth ...

javascripthtmlcssinternet-explorer