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>Within my ASP.NET MVC project, I am utilizing a tab wizard. On one of the tabs, I trigger a modal dialog by loading HTML content from an external API. However, once I close the wizard and navigate to the next tab, the table style (specifically border color ...
I have a scenario where I have multiple divs ('group') containing text, and there is a floated div ('toggle') in the bottom corner. The current code works well if the text length in 'group' is consistent, but the position of t ...
I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...
I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...
I've encountered a dilemma where the category name is being outputted as the same for both offered and wanted categories in PHP. This issue arises when trying to display categoryName differently for each type of category in a table. Despite attempting ...
Even though I used p:nth-child(1){color: white;} in my CSS style tag, it did not produce the expected result. body { background-color: #162b85; } button, p:nth-child(1) { color: white; } <p class="center">Register your account</p&g ...
How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...
I am looking to implement a tooltip similar to the one shown in the image. The value in the title tag is dynamic and fetched from the controller. https://i.sstatic.net/C2v3D.png Below is the code snippet of my table: <table border="1" cellpadding="10" ...
I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...
I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...
My form group includes both a label and an input field <div class="col-md-12 form-group"> <label class="col-sm-2 col-form-label" for="name">Name</label> <input type="text" class="form-control" name="name" id="name" [(ngMode ...
It appears that the onkeyup event is not triggered in IE8/IE9 (uncertain about 10) when the enter button is pressed in an input box, if a button element is present on the page. <html> <head> <script> function onku(id, e) { var keyC = ...
After creating two JavaScript functions, I am eager to utilize both of them upon pressing the submit button on my form. The first function is already integrated into the submit button and activates a paragraph display upon submission. Now, I intend to sh ...
I am trying to add a background image to the <img> tag. My goal is to display the checkmark image in the center of the Twitter image. However, the checkmark image as a background image is not appearing here. img{ background-image:url(https://www ...
My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...
My system is currently running Netbeans 8.0.1 and PhoneGap 3.5.0, but I am facing an issue where Netbeans does not allow me to create a new PhoneGap/Cordova project. According to some sources, this could be due to PhoneGap changing its versioning format, ...
How can I achieve the appearance seen in this image? The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns should have a black background tha ...
Having trouble locating the "import" element using Selenium Webdriver in C#. I've attempted the following codes but haven't had any luck: driver.FindElement(By.XPath("//*[@class='menu_bg']/ul/li[3]")).Click(); driver.FindElement(By.XPa ...
As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...
Is there a way to generate multiple values for a single property in CSS? background-image: radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, tr ...