Dropdown Menu Responsive

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Suggested Hosts
Jphammer
Registered User
Posts: 51
Joined: Mon Dec 19, 2016 11:27 pm

Dropdown Menu Responsive

Post by Jphammer »

Good Morning ,

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()">&#9776;</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;
  }
}
User avatar
Mannix_
Registered User
Posts: 2017
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Dropdown Menu Responsive

Post by Mannix_ »

You have this in your responsive.css file

Code: Select all

media="(max-width: 700px)"
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
@media screen and (max-width: 600px)
.topnav.responsive .nav-dropdown {
    float: left;
}
and a I think it should be this

Code: Select all

    float: none;
    display: block;
    text-align: left;
just like this one does

Code: Select all

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
@media screen and (max-width: 600px)
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
Jphammer
Registered User
Posts: 51
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer »

Ah prefect , thank you that's working, how ever its still appearing at in the main menu at the top before you expand the menu. Do you have any idea's why that's happening ?
menu bar error.PNG
You do not have the required permissions to view the files attached to this post.
Jphammer
Registered User
Posts: 51
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer »

Mannix_ wrote: Tue Apr 24, 2018 10:54 am You have this in your responsive.css file

Code: Select all

media="(max-width: 700px)"
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
@media screen and (max-width: 600px)
.topnav.responsive .nav-dropdown {
    float: left;
}
and a I think it should be this

Code: Select all

    float: none;
    display: block;
    text-align: left;
just like this one does

Code: Select all

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
@media screen and (max-width: 600px)
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}

That has worked thank you. However the Dropdown is still appearing in the main menu as well as the expanded view .
User avatar
Mannix_
Registered User
Posts: 2017
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Dropdown Menu Responsive

Post by Mannix_ »

I know why this is happening but you would need to wait for someone else to help you because I can't find a fix for that sorry :)
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Jodi-86
Registered User
Posts: 100
Joined: Thu Nov 30, 2017 10:04 pm

Re: Dropdown Menu Responsive

Post by Jodi-86 »

I believe this can be solved by adding:

Code: Select all

.nav-dropdown {
    display: none;
}

@media (max-width: 500px) {
.nav-dropdown {
    display: block;
}
}
The top part makes it hidden on full screens - the bottom part makes it appear just as your other links hide at 500px.
Jphammer
Registered User
Posts: 51
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer »

Mannix_ wrote: Tue Apr 24, 2018 2:04 pm I know why this is happening but you would need to wait for someone else to help you because I can't find a fix for that sorry :)
no worries, thank you for your help .
Jphammer
Registered User
Posts: 51
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer »

Jodi-86 wrote: Tue Apr 24, 2018 2:17 pm I believe this can be solved by adding:

Code: Select all

.nav-dropdown {
    display: none;
}

@media (max-width: 500px) {
.nav-dropdown {
    display: block;
}
}
The top part makes it hidden on full screens - the bottom part makes it appear just as your other links hide at 500px.
Thank you for you're reply and help.

Im not trying to hide it desktop view as when you hover over it , it bring up more links .

Ive added

Code: Select all

@media (max-width: 500px) {
.nav-dropdown {
    display: block;
}
}
but changed display: block to display: none and it worked ! :)

thank you for your help

Return to “[3.1.x] Styles Support & Discussion”