Move the element to the top within the navigation bar

I am currently enhancing the appearance of my navbar by adding two "Stripes" on top. I am using bootstrapv4 as a base, but facing an issue where bootstrap centers my decorations. How can I prevent this?

Below is a simplified version of my code:

HTML:

<nav class="navbar navbar-expand-lg navbar-green">
  <div class="navbar-top-bg"></div>
  <div class="container">
    <div class="navbar-top-fg"></div>
  </div>
</nav>

CSS:

.navbar-top-bg {
  position: absolute;
  content: "";
  width: 100%;
  height: 10px;
  background: rgba(67, 107, 65, 0.5);
  margin: 0 auto;
  z-index: 111111;
  border-bottom: 1px solid rgba(87, 136, 89, 0.4);
  vertical-align: top;
}

.navbar-top-fg {
  position: relative;
  content: "";
  width: 288px;
  height: 10px;
  -webkit-transform: perspective(40px) rotateX(-16deg);
  transform: perspective(40px) rotateX(-16deg);
  background: rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  z-index: 1111111;
  /*border-bottom: 2px solid rgba(234, 234, 234, 0.4);*/
  border-right: 2px solid rgb(65, 100, 62);
  border-left: 2px solid rgb(65, 100, 62);
  vertical-align: top;
}

.navbar-green {
  padding-left: 0;
  padding-right: 0;
  background: rgba(37, 48, 27, 1);
  background: -moz-linear-gradient(top, rgba(39, 41, 37, 1) 0%, rgba(0, 0, 0, 0.60) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(39, 41, 37, 1)), color-stop(100%, rgba(0, 0, 0, 0.60)));
  background: -webkit-linear-gradient(top, rgba(39, 41, 37, 1) 0%, rgba(0, 0, 0, 0.60) 100%);
  background: -o-linear-gradient(top, rgba(39, 41, 37, 1) 0%, rgba(0, 0, 0, 0.60) 100%);
  background: -ms-linear-gradient(top, rgba(39, 41, 37, 1) 0%, rgba(0, 0, 0, 0.60) 100%);
  background: linear-gradient(to bottom, rgba(39, 41, 37, 1) 0%, rgba(0, 0, 0, 0.60) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25301b', endColorstr='#79bd64', GradientType=0);
  border-bottom: 1px solid rgba(91, 115, 89, 0.08) !important;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
  height: 75px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

The green stripes in the design are appearing vertically centered within the navbar, but my preference is to display them at the top. To visualize this layout adjustment, you can remove the navbar and navbar-expand-lg classes. Additionally, I would like to retain the common "navbar" features for incorporating links and other elements.

For reference, here is the link to the jsfiddle:

https://jsfiddle.net/Insax/apzb42b9/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To create the "stripe" effect, apply position: absolute to both components and position them at the top using top: 0. Center them by using left: 0 and right: 0.

Check out this JSFiddle

.navbar-top-bg {
  width: 100%;
  height: 10px;
  background: rgba(67, 107, 65, 0.5);
  margin: 0 auto;
  z-index: 111111;
  border-bottom: 1px solid rgba(87, 136, 89, 0.4);
}

.navbar-top-fg {
  width: 288px;
  height: 10px;
  -webkit-transform: perspective(40px) rotateX(-16deg);
  transform: perspective(40px) rotateX(-16deg);
  background: rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  z-index: 1111111;
  /*border-bottom: 2px solid rgba(234, 234, 234, 0.4);*/
  border-right: 2px solid rgb(65, 100, 62);
  border-left: 2px solid rgb(65, 100, 62);
}

.navbar-top-bg,
.navbar-top-fg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

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

Troubleshooting issues with displaying anchor tags using Jquery

I am facing an issue where I am unable to make an anchor tag visible using the .show() method in JQuery or JavaScript. The Conn Window is visible by default, and I am able to hide and display the div, but the same does not apply to the anchor tag. Interest ...

javascriptjqueryhtml

What is the reason behind why decimals don't automatically pre-fill like integers do?

Seeking help with an HTML issue - I have a field pre-filled with a decimal number, but it's not displaying the value when loaded. The field should accept both integers and decimals, but only integer values are showing up correctly. I've spent ho ...

htmlasp.netasp.net-mvcasp.net-core

Numerous DIVs with floating elements and border styling

Trying to align two divs with one floating to the left and with a width of 80%, while the other is floated to the left with 20% width, is causing some issues. I want to add a border on the right side of the first div and apply a box-shadow of 5px since eac ...

htmlcss-floatbordercss

What is the best way to create a read-only input field?

https://i.sstatic.net/36h6s.png The code I attempted to use did not produce the desired result <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f ...

htmlbootstrap-5

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Can you help me with aligning two elements to the center and right edge using flex? I am trying to achieve a layout similar to the image. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX https://i.sstatic.net/cvmHX.png CSS Styles .flex{ display: flex; justify- ...

htmlcss

What is the best way to combine a navbar with a video background?

Recently, I delved into Bootstrap and attempted to execute a code for a navbar with a video background. This is what my attempt looked like: HTML Code: <html> <head> <title>Medical</title> <meta charset="UTF-8&qu ...

htmlcssbootstrap-4backgroundnav

Using a personalized font in CSS isn't functioning correctly and is displaying Times New Roman instead

I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file: @font-face { font-family: 'Open Sans'; src: url('/open-sans.eot'); src: u ...

css

Ways to include margin right for a table

Here is the HTML code I am working with: <table width="100%;> <tr><hr style="width:100%;"></hr></tr> <tr> <span style="float:left">abc</span> <span class="noindex" ...

htmlcss

The sticky navigation bar allows for the overlapping of additional div elements

Here is the HTML AND SCSS(SASS) code for a NAVBAR: <div id="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#main">Main</a></li> ...

htmlcsscss-positiondisplaysticky

Switch between list items using a button to change the ID in Javascript

I am trying to implement a floating navbar that appears after a button click and floats down from the top. The idea is that when the button is clicked, the navbar animates downward and then changes the button's id so that the next click triggers a dif ...

javascripthtmljquerybutton

Having trouble with charts not appearing on your Django website?

I am working on a Django project where I need to integrate bar-charts using Django-nvd3. Although I have successfully displayed the bar-charts in separate projects, I am facing an issue with integrating them into my current project. Below is the code snipp ...

javascriptpythonhtmldjangonvd3.js

Using CSS, I have rearranged the content of a single row (tr) in an HTML table into two separate rows

I am currently facing a challenge with rearranging my table due to width constraints. My goal is to apply Jquery functions to the table in order to extract all parameters related to a product, but I want to avoid having nested tr elements or splitting para ...

jqueryhtmlcss

Creating a Personalized Dropdown Menu Within the <div> Tag

My current task involves obtaining an element in the following format: https://i.sstatic.net/uhHkL.png Inside the nav-item, there is a dropdown with a top-centered triangle on it, and the dropdown is positioned at the center. Below is what I have achiev ...

htmlcssdrop-down-menubootstrap-4

Tips for choosing a block using Puppeteer

Trying to retrieve the height of a series of blocks using Puppeteer, I encountered an issue where I couldn't select my block in page.evaluate() due to an error. The code snippet in question is as follows: (async () => { const browser = aw ...

javascripthtmlnode.jspuppeteer

Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one o ...

csstwitter-bootstraptwitter-bootstrap-3

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

htmlcsswordpressinternet-explorer

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

javascripthtmlcssgetelementbyidclassname

Wrapping an anchor tag with a div in Codeigniter

Can a div tag be used inside an anchor function? I have a div with the following CSS: #first{ opacity:0; } Now, I want to include it in my anchor element. Here is the code snippet: <?php if(is_array($databuku)){ echo '<ol>&l ...

javascriptjqueryhtmlcsscodeigniter

CSS query: How to eliminate the extra space at the top of a webpage?

How can I eliminate the gray area visible here: The padding in style.css is currently set to: padding: 0; I have attempted to modify this by changing the following: #page { margin-top: 0; } I have tried variations such as: #page { margin-top: 5px !im ...

cssmargin

Setting a maximum character limit for an HTML textarea

I am currently attempting to limit the maximum number of characters allowed in a textarea. Using: <textarea rows="4" cols="50" maxlength="50"> It is functioning correctly in Firefox, but there is no impact in IE. This is an issue as many website u ...

htmltextareamaxlength