Dropdown Menu Responsive

For support and discussion related to templates, themes, and imagesets in phpBB 3.1.
Get Involved
Locked
Jphammer
Registered User
Posts: 29
Joined: Mon Dec 19, 2016 11:27 pm

Dropdown Menu Responsive

Post by Jphammer » Tue Apr 24, 2018 9:58 am

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: 306
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Dropdown Menu Responsive

Post by Mannix_ » 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;
}
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

Jphammer
Registered User
Posts: 29
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer » Tue Apr 24, 2018 11:26 am

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

Jphammer
Registered User
Posts: 29
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer » Tue Apr 24, 2018 1:29 pm

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: 306
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Dropdown Menu Responsive

Post by Mannix_ » 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 :)
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

Jodi-86
Registered User
Posts: 84
Joined: Thu Nov 30, 2017 10:04 pm

Re: Dropdown Menu Responsive

Post by Jodi-86 » 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.

Jphammer
Registered User
Posts: 29
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer » Tue Apr 24, 2018 2:31 pm

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: 29
Joined: Mon Dec 19, 2016 11:27 pm

Re: Dropdown Menu Responsive

Post by Jphammer » Tue Apr 24, 2018 2:43 pm

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

zamakli
Registered User
Posts: 3
Joined: Tue May 29, 2018 11:12 pm

Re: Dropdown Menu Responsive

Post by zamakli » Tue Jun 12, 2018 12:06 pm

I'm so happy with how well this worked on my site! This saved me HOURS of work!!! Totally worth the $14 subscription, Thanks :D
BluestacksTextNowPhotomath
Last edited by zamakli on Wed Jun 13, 2018 7:05 pm, edited 1 time in total.

User avatar
Mick
Support Team Member
Support Team Member
Posts: 19723
Joined: Fri Aug 29, 2008 9:49 am
Location: Watching cricket probably . . .

Re: Dropdown Menu Responsive

Post by Mick » Tue Jun 12, 2018 12:37 pm

zamakli wrote:
Tue Jun 12, 2018 12:06 pm
Totally worth the $14 subscription
what was that for?
"The more connected we get the more alone we become" - Kyle Broflovski

There are no ‘threads’ in phpBB, they are topics.

Locked

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

Who is online

Users browsing this forum: No registered users and 5 guests