How can I ensure that my navbar-right remains fixed to the right side of the screen and is always visible at the top of the page as I

When the page first loads:

After scrolling down:

I am attempting to create a fixed navigation bar at the top of the screen, so that it remains visible as the user scrolls down the page. However, I am facing an issue where my navbar brand is positioned to the left and the links to other sections are supposed to be on the right. When I apply position: fixed to the navbar brand, it works correctly, but when I try to apply it to any other classes related to the links, they end up getting fixed to the left side and overlapping with the brand or appearing directly below it. I cannot seem to figure out why this is happening.

I have experimented with applying position: fixed to various classes within the navbar without success. I also tried using float: right!important to force the items to the right. Most of the resources I found suggest adding position: fixed to the .nav class, but doing so causes the items to shift to the left. I have included the HTML for my nav, as well as the CSS for the nav, background-video, and modal linked in the nav, in case there is a specific reason causing this problem. Any assistance would be greatly appreciated!

HTML

<nav class="navbar">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="#home"><h3>allicndev</h3></a>
        </div><!-- /navbar-header -->
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#about" class="db-line">About</a></li>
          <li class="active"><a href="#portfolio">Portfolio</a></li>
          <li class="active">
            <a href="#" data-toggle="modal" data-target="#myModal">Resume</a>
          </li>
          <li class="active"><a href="#skills">Skills</a></li>
          <li class="active"><a href="#contact">Contact</a></li>
        </ul><!-- /nav navbar-nav navbar-right -->
      </div><!-- /container-fluid -->
    </nav>
    <!-- /navigation -->
    <!-- modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h4 id="myModalLabel" class="modal-title">Resume</h4>
      </div><!-- /modal-header -->
      <div class="modal-content">
        <embed id="modal-embed" src="assets/anresume.pdf">
      </div><!-- /modal-content -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div><!-- /modal-footer -->
    </div><!-- /modal fade -->
    <!-- /modal -->

CSS

* {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  position: relative;
}
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 17px;
}
#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
.container-fluid {
  padding-right: 30px;
  /* position: fixed; */
}
nav {
  height: 75px;
  display: border-box;
  color: white;
  font-size: 12px;
  text-align: center;
  position: fixed;
  /*z-index: 10px;*/
}
nav.navbar {
  width: 100%;
}
.navbar-header {
  position: fixed;
}
.nav.navbar-nav.navbar-right > li {
  padding-top: 15px;
  margin: 10px;
}
.nav > li > a {
  display: inline;
  padding-left: 0;
  padding-right: 0;
  padding-top: 5px;
  background-color: transparent;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover {
  background-color: transparent;
}
a.db-line {
  transition: white .3s linear;
}
a {
  color: white;
  text-decoration: none;
}
a > h3 {
  color: white;
  text-decoration: none;
}
a:hover {
  color: #f97f04;
}
/* a:visited {
  color: #EDCF10;
} */
.modal {
  display: none;
  height: 100%;
  left: 10px;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal.open {
  display: block;
}
.modal-header,
.modal-footer {
  height: 75px;
}
.modal-content,
.modal-footer {
  width: 100%;
}
.modal-footer {
  bottom: 0px;
}
#modal-embed {
  width: 100%;
  height: 75vh;
}

My desired outcome is for the "allicndev" brand to be on the top left and the links ("about", "portfolio", "resume", "skills", and "contact") to be on the top right, while keeping the entire navigation bar visible even as the page is scrolled through or different sections are targeted.

Answer №1

Definitely utilize the fixed-top class for a navbar that should remain fixed at the top while scrolling

<div class="navbar fixed-top">

</div>

Answer №2

The code provided is using Bootstrap 3 markup, which may cause issues since this question is tagged under Bootstrap 4.

If we assume Bootstrap 4 should be used, ensuring the correct markup and classes are added can help achieve the desired outcome. Here is an example: https://jsfiddle.net/4rtjcpzm/1/

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<nav class="navbar navbar-expand fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#home">allicndev</a>
    <div class="collapse navbar-collapse in" id="navbarCollapse">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item active"><a href="#about" class="nav-link db-line">About</a></li>
      <li class="nav-item "><a href="#portfolio" class="nav-link">Portfolio</a></li>
      <li class="nav-item ">
        <a href="#" class="nav-link" data-toggle="modal" data-target="#myModal">Resume</a>
      </li>
      <li class="nav-item "><a class="nav-link" href="#skills">Skills</a></li>
      <li class="nav-item "><a class="nav-link" href="#contact">Contact</a></li>
    </ul><!-- /nav navbar-nav navbar-right -->
    </div>
  </div><!-- /container-fluid -->
</nav>

The ml-auto class (which stands for margin-left: auto) is responsible for positioning the links to the right side. Both fixed-top and sticky-top classes will keep the navbar at the top of the viewport.

Using the sticky-top class might be better as it avoids the need to adjust body content down (padding-top in the CSS part of the fiddle); however, this depends on browser support for position: sticky;.

Additionally, note that nesting a heading element like <h3> inside an anchor element <a> is not valid HTML by default, as <h3> is a block element and <a> is an inline element according to the HTML spec.

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 a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

In IE9/10, the absolutely positioned pseudo element within a table cell does not fully overlay its parent

My layout includes nested div elements displayed as a table and table-cell, with each cell containing an absolutely positioned :before element that covers the entire cell. While this setup works perfectly in most browsers, I am facing an issue in IE9, 10, ...

How can I effectively access and view HTML files within VSCode while utilizing WSL?

Has anyone else experienced issues with the open-in-browser extension? Whenever I try to open my HTML file for a project, it doesn't load in the browser. I've attempted storing my repository in different directories on Linux and even in a folder ...

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

My task involves creating a quiz application where I need to show the answers along with images of the choices stored in my JSON data. However, I encounter an error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I attempt ...

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...

Is it possible to dynamically assign and call functions through an Object in Angular 6?

I implemented a click handler for a button that is generated dynamically. Within the click handler function, I am invoking a callback function. However, I encountered an issue where an error message popped up stating that "Callback function is not a fu ...

Filtering with XML parsing

My XML file has the following structure - <?xml version="1.0" encoding="UTF-8"?> <prj:Flow xmlns:prj="url1" xmlns:com="url2" xmlns:ns2="url3" xmlns:con="url4" xmlns:ns0="url5" xmlns:ns1="url6" xmlns:ns3="url7"> <prj:str> &l ...

Sharing package JSON file dependencies with child engines and addons in Ember.js

I am seeking information on how Ember Js can share the parent app's package.json file dependency (xyz:3.0.0) with child engines and addons without them needing to redeclare the dependencies in their own package.json files. This is to reduce the overal ...

Creating a background overlay on top of an image background using styled-components in React: A step-by-step guide

I need help figuring out how to construct a unique component in react styled component that combines a background image with a black semi-transparent overlay. For visual reference, here is an example: https://i.sstatic.net/R6IBY.jpg ...

Is there a way to deactivate the previous button for today's date?

I need assistance with disabling the previous button on today's date in my calendar. It is crucial that users are only able to select the start date from today onwards. I am currently utilizing moment.js for my Datepicker. Any help would be greatly ap ...

Eliminate repeated entries in a drop-down menu and display them with commas in between

I am working with a list that contains various language combinations: German to English German to Spanish German to Chinese German to French English to Spanish English to French English to Greek English to Portuguese Does anyone have suggestions on how ...

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

I've been attempting to create a similar animation using html and css. Below gif shows the desired outcome I am aiming for: https://i.sstatic.net/YsNGy.gif Although I have tried the following code, I have not been able to achieve the desired result ...

Python // Regular Expressions // Categories

My attempt to retrieve specific text content from various HTML tags using BeautifulSoup (BS4) proved unsuccessful. The code snippet I used only managed to extract the first text item after the <td tag, leaving out the rest that I needed. My goal is to p ...

Trouble with displaying HTML content on BrowserField in a BlackBerry device

After successfully solving the issue I posted here, it turns out that the problem was not with parsing, but rather in URL creation. :) Now a new challenge has arisen - the data obtained through parsing contains HTML tags. I attempted to display the HTML c ...

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

What are the steps to restrict a user from accessing a specific website?

In my Vue.js project, I've implemented a function that hides a specific menu item for users with insufficient permissions: <a :href="href" @click="navigate" v-if="hideMenuItem()"> // some code </a> hideMe ...

How to dynamically adjust column width based on maximum content length across multiple rows in CSS and Angular

I am attempting to ensure that the width of the label column in a horizontal form is consistent across all rows of the form based on the size of the largest label. Please refer to the following image for clarification: Screenshot Example All label column ...

JavaScript not functional, database being updated through AJAX calls

I have created a game using Phaser, a JavaScript library for games. Now I am looking to implement a score table using JS/PHP. My main focus is on transferring a variable from JS to PHP in order to update the database. I have researched numerous topics and ...

Locate the HTML code following an AJAX response

JavaScript code snippet: $("#category select").change(function(){ var category = $('select option:selected').html(); $.ajax({ type:"Post", url:"collectiepost.php", data:"category="+category, cache:"false" ...

The React production build is experiencing a problem where the Jumbotron background image fails to render

I am experiencing an issue where my image is not showing up in my React App that uses Bootstrap 4.3 after running npm run build. The image has been relocated to the Public Directory (/images/bg.jpg). While I can see it rendering correctly in the Developme ...