I have created a web page header that is going to be inherited by other site pages. Before I decided it would be inherited, that way I only have to update it once instead of across page to page, the home button would include the link back to that page instead of the root page. Now the Home page should include the link to the root page, that way the dropdown button (not its dropdown-content buttons) will link to the home page of that site. To achieve this, I knew I had to wrap an anchor around the <button class="dropbtn"></button>.
After I did this, the positioning of all of my header items became askew. I am unsure why this is happening, as I thought the CSS would not be affected by including that.
UPDATE: The current answer doesn't work in my scenario. On JSFiddle the option recommended works, but when I implement the HTML into my web page header on SharePoint, the page reloads when the parent element (link before dropdown) just reloads the same page instead of redirecting to the link in which I referenced. In this fiddle, it demonstrates both examples (one provided in the answer & removing the button while utilizing the anchor for the dropdown content). The first IT link is the example that works on SharePoint, but now the styling is all askew again. (Also it doesn't execute the "target="_blank" when the button element is there, but if it is just the anchor element, it executes.)
Here is the expected result (minus the anchor, just the styling):
body {
font-family: Arial, Helvetica, sans-serif;
}
.itlogo{
float: right;
justify-content: right;
height: 95%;
width: auto;
vertical-align: baseline;
padding-right: 20px
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 64px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
#s4-titlerow{
display: none;
visibility:hidden
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #104723;
color:white;
}
#contentRow{
margin-top: -50px;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 600px) {
.responsive {
width:100%;
display:flex;
flex-wrap:wrap;
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 150px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="responsive">
<a href="">Home</a>
<div class="dropdown">
<button class="dropbtn">IT
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="" target="_blank">Cyber Security</a>
<a href="" target="_blank">Operations</a>
<a href="" target="_blank">Support</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Example
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="" target="_blank">Sub 1</a>
<a href="" target="_blank">Sub 2</a>
<a href="" target="_blank">Sub 3</a>
</div>
</div>
</div>
<img src="https://www.experian.com/assets/banks/images/Primary-Experian-Dark-Blue-technology-icon.png" class="itlogo"/>
</div>
</head>
<body>
</body>
</html>Here is the actual result with the anchor included:
body {
font-family: Arial, Helvetica, sans-serif;
}
.itlogo{
float: right;
justify-content: right;
height: 95%;
width: auto;
vertical-align: baseline;
padding-right: 20px
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 64px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
#s4-titlerow{
display: none;
visibility:hidden
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #104723;
color:white;
}
#contentRow{
margin-top: -50px;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 600px) {
.responsive {
width:100%;
display:flex;
flex-wrap:wrap;
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 150px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="responsive">
<a href="">Home</a>
<div class="dropdown">
<a href="www.google.com"><button class="dropbtn">IT
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
<a href="" target="_blank">Cyber Security</a>
<a href="" target="_blank">Operations</a>
<a href="" target="_blank">Support</a>
</div>
</div>
<div class="dropdown">
<a href="www.google.com"><button class="dropbtn">Example
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
<a href="" target="_blank">Sub 1</a>
<a href="" target="_blank">Sub 2</a>
<a href="" target="_blank">Sub 3</a>
</div>
</div>
</div>
<img src="https://www.experian.com/assets/banks/images/Primary-Experian-Dark-Blue-technology-icon.png" class="itlogo"/>
</div>
</head>
<body>
</body>
</html>The .navbar a selector is too general and is being applied to too many elements. I changed it to .navbar .home and added a home class to your home anchor link and it fixed all the issues:
body {
font-family: Arial, Helvetica, sans-serif;
}
.itlogo {
float: right;
justify-content: right;
height: 95%;
width: auto;
vertical-align: baseline;
padding-right: 20px
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 64px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
.navbar .home {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
#s4-titlerow{
display: none;
visibility:hidden
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #104723;
color:white;
}
#contentRow{
margin-top: -50px;
}
.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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 600px) {
.responsive {
width:100%;
display:flex;
flex-wrap:wrap;
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 150px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="responsive">
<a class="home" href="">Home</a>
<div class="dropdown">
<a href="www.google.com"><button class="dropbtn">IT
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
<a href="" target="_blank">Cyber Security</a>
<a href="" target="_blank">Operations</a>
<a href="" target="_blank">Support</a>
</div>
</div>
<div class="dropdown">
<a href="www.google.com"><button class="dropbtn">Example
<i class="fa fa-caret-down"></i>
</button></a>
<div class="dropdown-content">
<a href="" target="_blank">Sub 1</a>
<a href="" target="_blank">Sub 2</a>
<a href="" target="_blank">Sub 3</a>
</div>
</div>
</div>
<img src="https://www.experian.com/assets/banks/images/Primary-Experian-Dark-Blue-technology-icon.png" class="itlogo"/>
</div>
</head>
<body>
</body>
</html>