I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working.
Please advise on where I should move the position fixed property so that my nav bar remains at the top while ensuring that the drop-down feature still functions properly?
Any help in resolving this issue would be greatly appreciated. Thank you.
erase overflow:hidden from the ul selector
body {
margin: 0;
}
h1 {
color: navy;
font-family: 'Nunito',sans-serif;
}
/*** NAVIGATION BAR ***/
ul {
list-style-type: none; /*Removes bulet points*/
margin: 0; /*Removes browser default - sets to far left of page*/
padding: 0; /*Removes browser default - sets to far left of page*/
width: 100%; /*Width of the nav bar buttons*/
background-color: black; /*Background colour of nav bar buttons #dddddd was #333 */
/* overflow: hidden; */
top: 0;
font-family: nunito;
opacity: 0.8;
position: fixed;
}
/*Sets a button to a colour
.active{
background-color: #4CAF50;
}*/
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red; /*Changes colour of active nav bar*/
}
li.dropdown {
display: inline-block;
}
/*Drop Down Box*/
.dropdown-content { /*This is the drop down box*/
display: none;
position: absolute;
opacity: 1;
background-color: #333; /*Changes colour of drop down box (non-active)*/
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #9B9B9B; /* Changes colour of text in drop down*/
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/*Active Drop Down Box*/
.dropdown-content a:hover {
background-color: #444; /*Changes colour of active drop-down box*/
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*** NAVIGATION BAR DONE ***/
.main { /*main class*/
margin-top: 50px;
}<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="Stylesheets/styles.css">
<link href="https://fonts.googleapis.com/css?family=Aleo|Indie+Flower|Nunito|Roboto" rel="stylesheet">
</head>
<body>
<!-- Nav Bar -->
<nav>
<ul>
<!-- Home -->
<li><a class="active" href="#home">Home</a></li>
<!-- News -->
<li class="dropdown">
<a href="#news" class="dropbtn">News</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<!-- Contact -->
<li><a href="#contact">Contact</a></li>
<!-- About -->
<li style="float:right"><a href="#about">About</a></li>
</ul>
</nav>
<!-- Main -->
<div class="main">
<h1>TEST 4</h1><p>TEST 2</p>
</div>
</body>
</html>While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...
I am trying to create a template that will only be displayed if the data value is "Low". This is how I have set up my template column: template: '# if( data=="Low" ){#<span><i class="fa fa-square blue"></i> <span># } ' U ...
Looking for Assistance I've been working on a simple web application using Laravel 6.0 and have encountered an issue with the image post function I developed. Despite not receiving any error messages, the functionality doesn't seem to be work ...
Recently, I used Yeoman (1.4.5) to scaffold a new web application. Within my Gruntfile.js, I configured it as follows: ... // When requested, compile Sass to CSS and generate necessary files sass: { options: { lineNumbers:true, sourceMap: true, ...
About My Minecraft Server: After running a Minecraft server in my basement for a few months, I realized that using TeamViewer to input commands and monitor the console was not ideal. The console of a Minecraft server provides a log of events with timestamp ...
Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...
When attempting to access detail.blade.php, I encountered an error stating "Missing required parameter for [Route: admin.request.update] [URI: admin/request/{request}] [Missing parameter: request]." Despite following the steps and codes exactly as in my pr ...
I have a website with two CSS files: one for viewing the site on a desktop screen and the other for viewing it on an iPad screen. Despite having the same HTML code, is there a way to detect the iPad device and force it to use the appropriate CSS file? Tha ...
My website was developed using jquery with a dynamic coding style. It was functioning properly in IE10 while working from Visual Studio. However, after deploying it to the production server, the entire style seemed broken in IE10. In all other versions o ...
I've been working on making the navigation bar stay fixed at the top of the page when the user scrolls, but I'm running into some issues. It seems that certain elements are overlapping the navigation bar, causing them to hide the navigation bar a ...
Is there a way to refresh a div using an image click? I have an image with the id 'sellhide' and another div with the id 'sellChart'. Below is the code: <div class="col-xs-12 col-lg-6 col-sm-6 col-md-6 index_table_three" id="sellCha ...
I'm struggling to figure out how to select the immediate div inside each td and properly load up the page. Each link seems to toggle every hidden div on the page! The table contains hundreds of rows, with each row featuring a visible part - a link - ...
I have some code here and I am looking to align the two elements at the bottom, "php echo do_shortcode(wcas-search-form);" and "php do_action('hamzahshop_custom_min_cart');" on the same line horizontally. I am new to this and struggling to figure ...
Apologies for any inaccuracies in technical terms used here. Despite being proficient in English, I learned programming in my native language. I am currently working on a project using the latest version of Angular along with Bootstrap. I'm unsure if ...
I'm facing a challenge when working with dynamic elements in jQuery and I really could use some help. Let me provide an example from my current project: main.js $(function () { renderPlaceList(places); setupVoting(); } The two functions are ...
Whenever a user clicks on a date in the jquery datepicker, two ajax calls are triggered. The goal is for the second ajax call to populate the response/data into a paragraph with the class spots within the first ajax call, displaying available spots for th ...
Looking to create a modal box using HTML, CSS, and jQuery? <button id="myBtn">Click here to open the Modal</button> This code will help you achieve that: <!-- This is the Modal content --> <div class="modal-content"> <sp ...
I'm encountering a small issue. I am currently utilizing Ajax to dynamically load content from another page into a <div> element after detecting a change in a <select>. However, my specific requirement is to only load a particular <div& ...
I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...
I experimented with AngularJS and found it to be a powerful but heavy framework, with a size of over 100k. Is there a more lightweight JavaScript framework specifically for managing HTML5 webpage history in an MVC project? What are your thoughts on using ...