Issues observed with the functionality of the fixed position menu bar

Is it strange that the menu bar remains fixed at the top of the page while scrolling down, but ends up going under another div making it impossible to click on the menu?

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
}

.row {
  margin: 0 auto;
  width: 100%;
  height: 400px;
}

.col-sm-4 {
  height: 100%;
  border: 1px solid black;
}
<div id='cssmenu'>
  <ul class="menubar">
    <li><a href="#" class="btn btn-sm">Please</a></li>
    <li><a href="#" class="btn btn-sm">Fix</a></li>
    <li><a href="#" class="btn btn-sm">This</a></li>
    <li><a href="#" class="btn btn-sm">Problem</a></li>
  </ul>
</div>
<div class="container-fluid">
  <div class='row'>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

This is the HTML code.

It's odd that everything works fine with other divs not using the classes container-fluid and row. Can someone help me solve this issue?

csshtmlmenubar

Answer №1

Make the link clickable by adding the z-index property to #cssmenu:

The z-index CSS property determines the stacking order of positioned elements and their descendants, resolving overlap issues.

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
  z-index:9;/*Include this line*/
}


#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
  z-index: 9;
}

.row {
  margin: 0 auto;
  width: 100%;
  height: 400px;
}

.col-sm-4 {
  height: 100%;
  border: 1px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id='cssmenu'>
  <ul class="menubar">
    <li><a href="#" class="btn btn-sm">Please</a></li>
    <li><a href="#" class="btn btn-sm">Fix</a></li>
    <li><a href="#" class="btn btn-sm">This</a></li>
    <li><a href="#" class="btn btn-sm">Problem</a></li>
  </ul>
</div>
<div class="container-fluid">
  <div class='row'>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

Answer №2

This code is perfectly okay.

#cssmenu {
position: fixed;
left: 0;
top: 0;
height: 40px;
width: 100%;
background-color: #E6E6E4;
}

#cssmenu ul li{
  display: inline;
  margin-right: 20px;
}

.row{
margin:0 auto;
width: 100%;
height: 400px;
}
.col-sm-4{
height: 100%;
border: 1px solid black;
}
<div id='cssmenu'>
        <ul class = "menubar">
            <li><a href = "#" class = "btn btn-sm">Please</a></li>
            <li><a href = "#" class = "btn btn-sm">Fix</a></li>
            <li><a href = "#" class = "btn btn-sm">This</a></li>
            <li><a href = "#" class = "btn btn-sm">Problem</a></li>
        </ul>
    </div>
    <div class="container-fluid">
     <div class = 'row'>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
     </div>
    </div>

Codepen: https://codepen.io/Omi236/pen/gRZYQZ?editors=1100

Answer №3

Give this a try and hopefully it solves your problem

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
}
.menubar{float:left;padding:0;margin:0;}
.menubar li{display:inline-block;float:left;}
.menubar li a{padding:10px;text-decoration:none;display:block;}

.row {
  margin: 0 auto;
  width: 100%;
  height: 400px;
}

.col-sm-4 {
  height: 100%;
  border: 1px solid black;
}
<div id='cssmenu'>
  <ul class="menubar">
    <li><a href="#" class="btn btn-sm">Please</a></li>
    <li><a href="#" class="btn btn-sm">Fix</a></li>
    <li><a href="#" class="btn btn-sm">This</a></li>
    <li><a href="#" class="btn btn-sm">Problem</a></li>
  </ul>
</div>
<div class="container-fluid">
  <div class='row'>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

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

Creating a dynamic shift in background color

Is it possible to use jQuery to slowly change the color of diagonal lines in a background styled with CSS, while also adding a fading effect? I have created a fiddle with the necessary CSS to display a static background. You can view it here: http://jsfid ...

javascriptjqueryhtmlcssfade

Tips for generating a document and adding information from an HTML webpage?

My desktop has an html file which requires input. How can I save this input to a file on my computer? Do I need to use a different language like python or javascript, and if so, how do I do it? Additionally, is there a way for javascript to launch an app ...

javascriptpythonhtmlfileserver-side

Ways to conceal overflow at the base of a container while enabling the image to break free from the top of the container

Trying to create a visual effect where an image of a person appears to be partially hidden inside a container, with the bottom part concealed by overflow: hidden. However, I want the top part of the image to extend out of the container. Is there a way to a ...

htmlcssclip-pathborder-radius

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

javascripthtmlcss

How about this: "Unveil the beauty of dynamically loaded

var request = new Request({ method: 'get', url: 'onlinestatusoutput.html.php', onComplete:function(response) { $('ajax-content').get('tween', {property: 'opacity', duration: 'long&apos ...

javascriptajaxhtmlmootoolsfade

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

phphtml

Executing a function in JQuery with care

Hey there, I have a total value output and I am trying to add a function that links to it. Unfortunately, I am encountering some issues while trying to put it together. The console keeps showing NaN or the "not defined" error. Here is the function I want ...

jqueryhtml

Trouble arises when attempting to animate the movement of two distinct objects consecutively using jQuery

I am facing an issue with combining animations of two different objects so that the second one starts when the first one ends. I attempted to use a callback function, but it seems I have made some syntax errors that are causing jQuery to crash or behave un ...

jqueryhtmlanimation

Adjust the dimensions of the icon

My current project involves creating a sidebar with icons and associated text to represent each icon. However, I encountered an issue while trying to adjust the size of the icons within the sidebar using the "useStyles()" method. For some reason, the size ...

cssreactjsmaterial-ui

Mixin for conditional input styles in Sass

I am interested in developing a conditional sass class that can be customized based on an argument provided. I am unsure about the terminology for this feature. For instance: <img class="width-200" .../> I would like to create a sass mixin that tak ...

csssass

Below are the steps to handle incorrect input after receiving only one letter:

H-I This is my input .centered-name { width: 80%; margin: auto; } .group { width: 100%; overflow: hidden; position: relative; } .label { position: absolute; top: 40px; color: #666666; font: 400 26px Roboto; cursor: text; transit ...

javascripthtmlcss

Unable to display image on HTML due to the image src not loading

Hey folks! I'm currently working on a TodoApp using react js, and although I have a basic layout set up, I am encountering an issue while trying to add images to the app. Unfortunately, the images are not loading as expected. Sharing the relevant cod ...

htmlreactjsweb

bootstrap style list-group without overlapping

In the image below, you can see that I have a list of American states within a list-group class. My issue is that I am attempting to eliminate the whitespace and essentially move Arkansas below Alaska and so forth. Here is my current HTML and CSS: CodePen ...

htmlcsstwitter-bootstrapbootstrap-4

Can a local image be incorporated into an HTML or CSS project through the use of Javascript or alternative methods?

I've been trying, but all I can manage is: <img width='220' height='280' src='chrome-extension://okjaohhbffepkcfacapapdhkmnebgiba/johnny.jpg' class="me"/> Unfortunately, this code only works in Chrome. Is there a ...

javascriptjqueryhtmlcss

What is the best way to align inline circles created with CSS vertically as the screen size changes?

Looking for resources on how to create circles using CSS? It can be a bit tricky, but here is the code you need: HTML <div id="wrapper"> <ul id="circles"> <li> <div class="circle"><div>K&l ...

htmlcssresponsive-designgeometry

"Utilize the attr attribute to showcase an image within an HTML select element

I'm trying to showcase the flag of each country in a dropdown menu. Here is the code I attempted: <select id="slcCountry"> <option flag="https://restcountries.eu/data/afg.svg">AFG</option> <option flag="https://restcountr ...

jqueryhtmlcsshtml-select

How can I make the footer on my webpage have a white background?

My goal is to create a white div that spans from point (A) to point (B) on the page, just like in the image. I aim for it to stretch all the way down to cover the entire browser without showing any gray background underneath, even when the page is scrolled ...

javascriptjqueryhtmlcss

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Hey there, currently creating my website and need some assistance. I'm looking to display the date and time in different sections of the page. Having some trouble with getting Indian time to work properly using PHP. If you could help me out with Ja ...

javascriptphphtml

Enhance class names by utilizing addEventListener within the useEffect hook

I'm having trouble with creating a hamburger button menu. The issue I'm facing is that when I click the button, nothing happens. Even though I can log something in the toogleHamburger function and see it in the console, the styling does not chang ...

cssreactjssass

Constructing a list without a specific order using data from various MySQL databases

I am currently in the process of constructing a menu that will display categories, subcategories, and tertiary categories sourced from three distinct tables within my database. Here is how the data is structured: TABLE A ------------------------ | ID | na ...

phphtmlmysqlwebhtml-lists