Ive added a menu bar into my test site and it displays fine on desktop , but experiencing issues on phones and tablets .
The menu bar does responds and fits to the relevant size of the screen, however the drop down button / link stays at the top in the main part of the nav bar instead of dropping into the relevant order of menu links . Please see the issue here http://www.jrstech.co.uk/OrginalHCForum/
Please could anyone provide some help, I'm sure I've missed something simple !
I'm using theme : Pro Silver and on version 3.1.9
Thank you for your help in advance .
here is my code for the menu bar :
Code: Select all
<div class="topnav" id="myTopnav">
<a class="nav-link" href="https:\\www.whufc.com">Home</a>
<a class="nav-link" href="#">Blogs</a>
<a class="nav-link" href="#">Videos</a>
<a class="nav-link" href="#">Thames Iron Works</a>
<div class="nav-dropdown">
<button class="nav-dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a class="nav-link" href="#">Contact Us</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
here is my css:
Code: Select all
.topnav {
overflow: hidden;
background: #782b3a;
box-shadow: inset 1px 0 7px 1px rgba(255,255,255,.5);
margin-top: 10px;
margin-bottom: 10px;
padding: 12px ;
text-align: center;
font: normal normal medium 'Trebuchet MS',Verdana,Arial;
border-bottom: 2px solid #1bb1e7;
}
.active {
border-bottom: 4px solid #fff;
color: white;
}
.topnav .icon {
display: none;
color: #fff;
}
.nav-dropdown {
background: #782b3a;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-top: 0px solid #782b3a;
border-bottom: 0px solid #782b3a;
padding: 4px 0;
margin: 0 10px ;
display: inline-block;
}
.nav-dropdown .nav-dropbtn {
font-size: 20px;
border: none;
outline: none;
color: white;
background-color: #782b3a;
font-family: inherit;
margin: 0px;
transition: 0.95s ease;
background: #782b3a;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-top: 0px solid #782b3a;
border-bottom: 0px solid #782b3a;
padding: 2px 0;
margin: 0 0px ;
}
.dropdown-content {
background-color: #782b3a;
border-radius: 13px;
display: none;
position: absolute;
background-color: #782b3a;
min-width: 50px;
z-index: 1;
padding: 0px;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
margin-top: 0 10px ;
transition: 0.95s ease;
border-bottom: 4px solid #782b3a;
padding: 2px 0px;
}
.nav-link {
background: #782b3a;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-top: 0px solid #782b3a;
border-bottom: 0px solid #782b3a;
padding: 2px 0;
margin: 0 10px ;
display: inline-block;
}
.nav-link:hover {
border-top: 2px solid #782b3a;
border-bottom: 3px solid #1bb1e7;
padding: 0px 0;
color: #ffffff;
text-decoration: none;
transition: 0.45s ease;
}
.2topnav a:hover, .dropdown:hover .dropbtn {
height: 0px;
border-bottom: 44px solid #fff;
padding: 3px 50px;
}
.dropdown-content a:hover {
background-color: #fff;
color: black;
background: #782b3a;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-bottom: 4px solid #1bb1e7;
padding: 2px 0;
}
.nav-dropdown:hover .dropdown-content {
display: block;
border-bottom: 2px solid #1bb1e7;
Padding: 10px 20px;
}
and my responsive CSS
Code: Select all
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: left;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}