I'm doing some work to set up a new website for a county, and these dropdown menus are giving me quite a bit of trouble. I'm using the code I have to make a custom theme for the county to use with Wordpress, though the issue I'm having pertains to the header specifically.
Issue: I have created three dropdown menus stemming from "Departments", "Services", and "How Do I". However, upon hovering over one of them, all three menus seem to conjoin into one and overlap each other. Also, the menu does not extend down past the navbar into the body, but creates a scroll option inside the navbar, which I do not want.
I've uploaded working chunks of HTML and CSS code to jsfiddle.net, so I'll share a link here: https://jsfiddle.net/cameoux/nbe18zav/
Feel free to take a look here though as well.
<html>
<body>
<div class="topnav" style="color: #FFFFFF">
<img src="<?php echo get_template_directory_uri(); ?>" alt="Image not found!" style="max-width: 100%; display: block;">
About
Contact
<div class="dropdown">
How Do I
<div class="dropdown-content">
Lorem ipsum domat queri?
Lorem ipsum sumer dokar?
Lorem escat que poner populusque?
</div>
Services
<div class="dropdown-content">
Pay Taxes Online
Voter Registration
Traffic Map
</div>
Departments
<div class="dropdown-content">
Chamber of Commerce
Health Department
Clerk's Office
</div>
</div>
</div>
<div class="icon-bar">
<i class="fa fa-facebook"></i>
<i class="fa fa-google"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-phone"></i>
</div>
<div class="container">
.topnav {
padding-top: 3rem;
padding-left: 7rem;
padding-bottom: 3rem;
top: 0px;
left: 0px;
height: auto;
position: relative;
background-color: rgba(0, 15, 93, 0.85);
font-size: 24pt;
font-family: 'lato', sans-serif;
font-weight: normal;
overflow: auto;
z-index: 1;
}
.topnav a,
.dropbtn {
color: white;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
position: relative;
float: right;
text-align: center;
text-decoration: none;
margin-right: 50px;
z-index: 1;
}
.topnav a:hover,
.dropdown:hover,
.dropbtn {
color: rgba(213, 159, 15, 1.0);
z-index: 1;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
z-index: 1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f4f4f4;
text-align: center;
font-size: 12pt;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
position: relative;
color: black;
padding: 12px 16px;
text-decoration: none;
display: inline-block;
text-align: center;
z-index: 1;
}
.dropdown-content a:hover {
background-color: #ddd;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
Ideally, I'd like the menu items to line up vertically, for the dropdowns to extend past the navbar and into the body of the page, and for the menus to remain separate and not overlap. Any help or advice would be appreciated, thank you!
Related
I am new to HTML and am about to complete my first website, however, I am stuck on the formatting of my navbar at different page widths.
I successfully managed to have a navbar with full options at max width, a drop down menu button below a certain width (1045px) and a sticky navbar when above 1045px with all options.
However, when the navbar is smaller than 1045px, the menu doesn't keep the same formatting and won't open to show drop down options. It also is permanently locked in the top left of the screen no matter the width.
Can someone please help fix my issue or provide guidance. The links provided are the resources I used to create this:
https://www.w3schools.com/howto/howto_css_dropdown.asp
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
These are also some minor issues I wanted to fix as well:
The options below 'Menu' option are left aligned to the button, Ii
would prefer it to be centred
When clicking the options in the full sized navbar, the back-ground colour changes even though I haven't programmed for this and would like the background colour not to change
Thank you for any help you can provide
EDIT:
I managed to fix the navbar formatting so it now says just menu when below 1045px, but when you hover or click on menu, the list for it doesn't show beneath; I instead noticed the list appeared on the right of all the other options when expanding the width beyond 1045px, with incorrect font-colour.
HTML:
<div id="navbar" class="sitcky">
<a title="Go to 'Before Rutherford' page" href="#">BEFORE RUTHERFORD</a>
<a title="Go to 'Experiment + results' page" href="exp.html">EXPERIMENT + RESULTS</a>
<a title="Go to 'What it changed' page" href="chang.html">WHAT IT CHANGED</a>
<a title="Go to 'Scattering equation' page" href="equa.html">SCATTERING EQUATION</a>
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
<a title="Go to 'Before Rutherford' page" href="#">BEFORE RUTHERFORD</a>
<a title="Go to 'Experiment + results' page" href="exp.html">EXPERIMENT + RESULTS</a>
<a title="Go to 'What it changed' page" href="chang.html">WHAT IT CHANGED</a>
<a title="Go to 'Scattering equation' page" href="equa.html">SCATTERING EQUATION</a>
</div>
</div>
<!-- Script to keep navbar sticky when scrolled -->
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
CSS:
#navbar {
background-color: rgb(0, 25, 50);
display: block;
width: auto;
text-align: center;
padding-top: 14px;
padding-bottom: 14px;
z-index: 10;
}
#navbar a {
color: whitesmoke;
text-decoration: none;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
#navbar a:hover{
color: rgb(255, 192, 0);
}
#s_navbar {
background-color: rgb(0, 25, 50);
display: block;
width: auto;
text-align: center;
padding-top: 14px;
padding-bottom: 14px;
z-index: 10;
}
#s_navbar a {
color: whitesmoke;
text-decoration: none;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
#s_navbar a:hover{
color: rgb(255, 192, 0);
}
#media (max-width: 1045px) {
#navbar a{display: none;}
}
#media (min-width: 1045px) {
.dropbtn {display:none;}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: rgb(0, 25, 50);
color: whitesmoke;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
color: rgb(255, 192, 0);
}
.sticky {
position: fixed;
top: 0;
left:0;
right:0;
width:max-content;
}
.sticky + .main {
padding-top: 60px;
}
I'm having some trouble aligning my dropdown menu in my angular app.
Please see the screenshot attached. The menu extends too far right of the screen. I need it to align to the "top right" of the ellipses instead of the "top left" as it is currently. The menu is currently functioning in a table.
Any assistance in getting the menu to shift to the left would be greatly appreciated.
Here is the HTML/CSS:
<td class="dropup">
<div class="dropup">
<button style="background-color: white;" class="dropbtn">
<img class="icon" src="assets/ellipsis.png">
</button>
<div class="dropup-content">
Admin Functionality
Download Project Snapshot
<a [routerLink]="['/project/'+j._id+'/project-activity']">View Project Activity</a>
Archive Project
<a *ngIf="j.creatorid != user._id" (click)="onLeaveProjectClick(j._id, j.projectname, n)">Leave Project</a>
</div>
</div>
</td>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropup {
position: relative;
display: inline-block;
float:right;
}
.dropup-content {
display: none;
position: absolute;
transform-origin: 60% 40%;
top: 20px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
}
.dropup-content :hover {
border-radius: 10px;
}
.dropup-content a {
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {
background-color: #ddd;
color: #00aca8 !important;
}
.dropup:hover .dropup-content {
display: block;
border-radius: 10px;
}
As you set .dropup-content to absolute, it will be left aligned relative to .dropup as .dropup-content is within .dropup. But as your class is already absolute, simply add:
right: 0;
left: auto; // Unsure if you really need this though
to .dropup-content. This will take care that the class is right aligned relative to .dropup.
add to class .dropup-content this:
right:0;
https://jsfiddle.net/b1stpfr4/2/
I'm doing a site in Shopify and I'm using supply theme, I want to use my own menu instead of using Shopify menu. I wrote code in HTML and CSS but I was wondering if it is possible for someone to help me to change following code in liquid because my friend does not know any HTML and CSS and for him, it's easier to change it through the liquid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
</div>
</body>
</html>
Even though I agree with drip's comment:
StackOverflow is not a "Write the code for me" platform.
Here is some helpful information, Liquid is templating language and there are many places to get you started with Liquid:
Shopify - Liquid reference
Shopify - Getting started Guide
Shopify Partners Blog - Learning Liquid
I can't get the dropdown to align in the same row as the rest of the bar (code below). I tried working with margins and paddings but that doesn't help either. Any guidance would be appreciated.
I need the drop-down menu to be on the right corner of the bar. You don't have to do the code for me, but I am trying to figure if there are two different styles intersecting each other and causing this or what should I do next?
* {
margin: 0;
}
body {
background-color: #f2f2f2;
font-family: "Verdana";
}
.headDivider {
background-color: #ff7200;
color: #ffffff;
font-size: 30px;
line-height: 50px;
height: 63px;
vertical-align: middle;
padding-top: 3px;
}
.back {
border-radius: 13px;
font-family: "Verdana";
text-align: left;
color: #ffffff;
float: left;
font-size: 16px;
background: #7c7c7c;
padding: 10px 26px 10px 26px;
border: none;
display: inline-block;
margin-top: 10px;
margin-left: 10px;
}
.title {
text-align: center;
margin-right: 95px;
}
h1 {
text-align: center;
}
.topText {
font-size: 38px;
line-height: 270px;
color: #ff7200;
}
.bottomText {
line-height: 280px;
font-size: 38px;
color: #ff7200;
}
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
text-align: right;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="headDivider">
<button type="button" class="back">Back</button>
<h4 class="title"> Viking Vote + </h4>
<div class="dropdown" style="text-align:right;">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>
As one of the variants is to use flexbox for headDivider
.headDivider {
background-color: #ff7200;
color: #ffffff;
font-size: 30px;
line-height: 50px;
height: 63px;
vertical-align: middle;
padding-top: 3px;
display: flex;
justify-content: space-between;
align-items: center;
}
Here is the fiddle with this solution and small fixes for other elements
<div class="headDivider">
<div style="float:left;">
<table>
<tr>
<td>
<button type="button" class="back">Back</button>
</td>
<td>
<h4 class="title"> Viking Vote + </h4>
</td>
</tr>
</table>
</div>
<div style="float:right;">
<table>
<tr>
<td>
<div>
<button class="dropbtn">Dropdown</button>
</div>
</td>
<td>
<div class="dropdown" style="text-align:right;">
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
I was able to build my first veterinarian Angular app with three partial templates and a dropdown menu using tutorials and SO's community great feedback, so I am very happy! :)
Intro page:
However, when I select "employees", I get my whisker box plots that block the dropdown menu:
I assume it's a matter of CSS, but I have been stuck for quite a while and would greatly appreciate the community's feedback.
Moreover, if I may ask, how could I have the menu button on the far right, same height as the topBanner with the dropdown menu aligned with the right edge (instead of the left edge as shown)? Thank you very much!
My webform:
...
<body onload="loadPikaday()" data-ng-app="myModule">
<%-- Header --%>
<div id="topBanner" class="topBanner">
<div id="menu" class="menu">
Report from:
<input id="startDate" size="6" type="text" data-ng-model="startDate" /> To
<input id="endDate" size="6" type="text" data-ng-model="endDate" />
<%-- Dropdown menu --%>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
Cases
Protocols
Employees
</div>
</div>
</div>
</div>
<%-- Where html is injected--%>
<div id="currentPage" class="currentPage">
<div data-ng-view=""></div>
</div>
<%-- Footer --%>
<div id="footer" class="footer">Veterinary Application</div>
</body>
...
my CSS file:
body,html{
margin: 0;
padding: 0;
}
.topBanner{
width: 100%;
background-color: #BDBDBD;
}
.menu{
text-align: left;
font-size: 40px;
font-family: Arial;
padding-bottom:5px;
padding-top:5px;
}
#startDate, #endDate{
font-size: 40px;
}
#button{
font-size: 40px;
}
.currentPage{
background-color: #E6E6E6;
width: 100%;
}
.footer{
font-size: 30px;
font-family: Arial;
background-color: #BDBDBD;
text-align: center;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}