"Enhance the Navbar with a pop of color by changing

https://i.sstatic.net/dHKsV.pngMy Navbar is already defined and working perfectly, but I want to add a full-page background to the Navbar links. Currently, on mobile devices, the link backgrounds do not cover the entire page horizontally and instead look like highlighted lines. Please see the screenshots for more details. Any help with this would be greatly appreciated. Thank you!

<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
  <a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
  <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="collapsingNavbar4">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div2" class="navbaritems">About</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div3" class="navbaritems">Contact</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#div4" class="navbaritems">Resume</a>
      </li>
    </ul>

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09686b6d7c656568612768646c6c6767496e64686065276a6664">[email protected]</a>" target="_blank"><img src="img/email.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
      <li class="nav-item active">
        <a href="https://www.linkedin.com/in/abdullahameen/" target="_blank"><img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
      <li class="nav-item active">
        <a href="https://twitter.com/AbdullahAmeenn?lang=en" target="_blank"><img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;"></a>&nbsp&nbsp&nbsp
      </li>
    </ul>
  </div>[![enter image description here][1]][1]
</nav>

htmlcssbootstrap-4

Answer №1

One possible solution is to implement the following:

<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">

Answer №2

Check out this custom style:

.navbar.scrolled .navbar-collapse{
    background: #116980;
    margin: -15px;
    padding: 15px;
    z-index: -1;
}

This code snippet will change the background color of .navbar-collapse when the page is scrolled down. It also removes the margin and replaces it with padding, while moving .navbar-collapse to the back to prevent it from covering elements like .navbar-brand and .navbar-toggler.

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

I'm trying to understand why this code isn't running properly. Can someone explain why my CSS is not being executed?

For some reason, using button .order{} to select elements inside the button is not applying the CSS codes as expected. The text color remains unchanged. However, when using just `.order` to select the elements, the CSS code works perfectly fine. Can someon ...

htmlcss

Having issues with a drop-down in Bootstrap. Is there anyone who can assist in getting it to function

I recently implemented a drop-down menu on the top navigation of my website. However, after applying Bootstrap to one of my pages, the drop-down menu stopped functioning properly. Below is the code that was applied: <link href="https://cdn.jsd ...

javascripthtmlcssbootstrap-5

Angular5 causing all divs to have click events at once instead of individually triggered

I am a beginner when it comes to working with Angular and I have encountered an issue. I created a click event on a FAQ page in Angular 5, but the problem is that when I click on one FAQ, they all open up instead of just the targeted one. Here is my TypeS ...

javascripthtmltypescriptangular5

Using CSS to ensure that the cards have consistent heights when using both React and Bootstrap

I am currently working with Bootstrap 4 in React. I have encountered an issue where the card for Item 1 is shorter than that of Item 2, and I would like both cards to have the same height. Additionally, I anticipate adding more cards at the bottom in the ...

cssreactjsbootstrap-4

Adding Space Before Bullet Points in HTML: A Quick Guide

Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...

htmlcss

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

I have a unique challenge where I need to only deal with positive values as input. var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name=" ...

javascripthtmljquery

What is the best way to track down the source of a CSS rule?

A website built on .asp was passed down to me, and I was tasked with reorganizing forms in tables to the sidebar. Most pages were successfully updated, except for one stubborn page that seems to be ignoring my CSS changes and using values from an unknown s ...

css

There is a collision of boxes occurring within the CSS

Help Needed: Overlapping Boxes in Responsive Design I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I ...

htmlcsscss-position

My HTML loop is functioning properly with a variable, however, it is not working as expected

Hi there! Here is a piece of code that includes a loop with a timer. I am trying to change a variable using a button, however, it's not working as expected. <!doctype html> <html> <body> <script> var timer = 1000; var counter ...

htmlloops

Arranging items in a flex container

My goal is to achieve the following layout with flexbox: #box { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; justify-items: center; align-items: center; } #spotLight img { width: 15%; height: 15%; } # ...

htmlcss

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

htmlcssflexbox

Enhancing Icons with Badges in Bootstrap

Does anyone know how to properly position a badge on top of an icon without it appearing to the right? Check out this screenshot: https://i.sstatic.net/z1Apj.png This is the code I am using: <li class="nav-item mr-3"> <a href=&quo ...

cssbootstrap-4icons

Unable to retrieve the following element in a JavaScript array

I am a beginner in JavaScript and I am attempting to access the next element of an array using an onclick function but so far I have not been successful. var i, len; function quiz() { var quiz_questions = [ "who is the founder of Fa ...

javascripthtml

When the form is submitted, delete the file and its corresponding record

Currently, I have a form that deletes a record from my MySQL database. The database stores the image/file name. I am looking to enhance the statement so that it also removes the file in the website directory with the corresponding image/file name. If bot ...

phphtmlmysqldelete-rowdelete-file

Adapting Vue.js directive based on viewport size - a guide

Having an element with the v-rellax directive, I'm utilizing it for prallax scrolling in this particular div: <div id="image" v-rellax="{ speed: -5 }"></div> Currently, there's a need to adjust the speed property ...

javascripthtmlcsslaravelvue.js

Position a span within a container div and ensure that it remains centered even in cases of overflow

I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...

htmlcss

Which particular files should be included such as CSS and JavaScript?

After downloading bootstrap4, I'm unsure which css, js, or other files are necessary to include in order to make my form Bootstrap ready. My current task involves creating a form in CakePHP 3. Click here for more information on how to create a form ...

csscakephpbootstrap-4cakephp-3.0

Customize the select option in HTML to hide the default arrow and provide additional spacing for the options

I am dealing with a select option markup that looks like this <div class="styleselect"> <select onchange="setLocation(this.value)" class="selections"> <option selected="selected" value="position">Position</option> <opt ...

htmlcss

responsive mega menu with multiple levels in Bootstrap 3

I specialize in creating mega menu navigation using Bootstrap 3. HTML: <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data- ...

htmltwitter-bootstrapcssmegamenu

Can you explain the mechanics behind Google Voice Search? And is there an available API for it?

Is this the right place to ask how the voice-activated search feature on Google's homepage functions? I'm curious about whether it utilizes Flash, a plugin integrated into Google Chrome, or some other method to access the microphone. The idea of ...

javascripthtmlvoice-recognition