Welcome! To use this support forum, please Login or Join Today!

   

Responsive Dropdown Menu Toggle - 2.x to 3.x Update

{name}
Rank

Total Posts: 5

Joined 2012-11-18

PM

 

My site: http://classiccitycenter.com/

I cannot get the toggle menu to show up, if I mouse click in the area where it’s at, it’ll open…..it’s like I have some kind of container covering it up..

{name}
Rank

Total Posts: 5

Joined 2012-11-18

PM

 

...Or can I set it some way with code to always be in the “open” position?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

This was an addition to the preset stylesheet. If you haven’t modified yours, then you can just copy the one over from the parent theme.

If you have modified your child theme style{x}.css, then you’ll need to add the styles below:


If using style1.css:

/* Responsive Dropdown Toggle Button */

@media only screen and (max-width: 767px) {
  #shownav {
    background-color: #669900;
    background-image: url("./images/style1/shownav.png");
    background-repeat: no-repeat;
    background-position: center -32px;
    width: 40px;
    height: 32px;
    top: -32px;
    right: 5px;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    -ms-border-radius: 0px 0px 4px 4px;
    -o-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    -webkit-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -moz-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -o-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
  }

  #shownav.active {
    background-color: #0775CF;
    background-position: center -2px;
  }
}


If using style2.css:

/* Responsive Dropdown Toggle Button */

@media only screen and (max-width: 767px) {

  #shownav {
    background-color: #FF6600;
    background-image: url("./images/style2/shownav.png");
    background-repeat: no-repeat;
    background-position: center -32px;
    width: 40px;
    height: 32px;
    top: -32px;
    right: 5px;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    -ms-border-radius: 0px 0px 4px 4px;
    -o-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    -webkit-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -moz-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -o-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
  }

  #shownav.active {
    background-color: #660000;
    background-position: center -2px;
  }
}

If using style3.css:

/* Responsive Dropdown Toggle Button */

@media only screen and (max-width: 767px) {
  #shownav {
    background-color: #990000;
    background-image: url("./images/style3/shownav.png");
    background-repeat: no-repeat;
    background-position: center -32px;
    width: 40px;
    height: 32px;
    top: -32px;
    right: 5px;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    -ms-border-radius: 0px 0px 4px 4px;
    -o-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    -webkit-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -moz-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -o-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
  }

  #shownav.active {
    background-color: #3F0000;
    background-position: center -2px;
  }
}

If using style4.css:

/* Responsive Dropdown Toggle Button */

@media only screen and (max-width: 767px) {
  #shownav {
    background-color: #889c16;
    background-image: url("./images/style4/shownav.png");
    background-repeat: no-repeat;
    background-position: center -32px;
    width: 40px;
    height: 32px;
    top: -32px;
    right: 5px;
    -webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
    -ms-border-radius: 0px 0px 4px 4px;
    -o-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    -webkit-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -moz-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    -o-transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
    transition: color 0.5s linear, background-color 0.5s linear, border-color 0.5s linear;
  }

  #shownav.active {
    background-color: #453420;
    background-position: center -2px;
  }
}

 

 

{name}
Rank

Total Posts: 25

Joined 2013-07-31

PM

 

I’m using this css with the viewport scaling enabled and toggle dropdown enabled. I’ve added and edited the suggested code to my child theme through WP admin custom css.

I get a light blue tab when inactive, and a dark blue tab when active, but I can’t get the up/down wedge to show up.

I just uploaded the shownav.png file to my child theme in the location quoted in the css code. It still doesn’t show up.

Is there something I can do? Otherwise there’s nothing to tell the user that there is something to activate. I wouldn’t mind some text that says “menu” as that might be clearer.

Thanks,
Susan

My edit of the code is below (just changed colours to match my theme colours)

/* Responsive Dropdown Toggle Button */
 
@media only screen and (max-width767px{
  
#shownav {
    
background-color#32a7fb;
    
background-imageurl("./images/style4/shownav.png");
    
background-repeatno-repeat;
    
background-positioncenter -32px;
    
width40px;
    
height32px;
    
top: -32px;
    
right5px;
    -
webkit-border-radius0px 0px 4px 4px;
    -
moz-border-radius0px 0px 4px 4px;
    -
ms-border-radius0px 0px 4px 4px;
    -
o-border-radius0px 0px 4px 4px;
    
border-radius0px 0px 4px 4px;
    -
webkit-transitioncolor 0.5s linearbackground-color 0.5s linearborder-color 0.5s linear;
    -
moz-transitioncolor 0.5s linearbackground-color 0.5s linearborder-color 0.5s linear;
    -
o-transitioncolor 0.5s linearbackground-color 0.5s linearborder-color 0.5s linear;
    
transitioncolor 0.5s linearbackground-color 0.5s linearborder-color 0.5s linear;
  
}
 
  
#shownav.active {
    
background-color#28485f;
    
background-positioncenter -2px;
  
}

 

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi Susan,

Any chance you can share a link so I can see what you’re looking at?

{name}
Rank

Total Posts: 7

Joined 2013-04-12

PM

 

Hi Casey, I too am having the same problem after an update…

I have added the css code you gave to my style1.css in my child theme, and this kind of fixed the problem but with a couple of extra issues, which im sure is easy to sort.

First, there is now a green box in the upper right hand side, when clicked, this turns blue and the drop down appears. I noticed in the updated css code it mentions an image, but I dont have one to upload, so I assume this would sort that out.

and secondy, on some of my menu items, there are a few child, child links thats doesnt fall below the others, but sits off the page, to the right (services/seminars/current seminars)

My site is http://mattselley.com


Many thanks

Matt

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi,

First of all, the color of the (mobile) menu seems to differ from a customization you’ve made to the main nav bar. To fix this, open style1.css and change:

/* Mobile Menu */

@media only screen and (max-width: 767px) {
 #menu .columns   {
  background: #0775cf url(./images/style1/nav_bg.png) repeat-x center top;

to:

/* Mobile Menu */

@media only screen and (max-width: 767px) {
 #menu .columns   {
  background: #0000FF url(./images/style1/nav_bg.png) repeat-x center top;

Secondly, the blue/green box you see in the top right corner is the toggle button for the menu. It doesn’t look right because the image is missing. You need to copy the shownav.png image from:

/wp-content/themes/synapse/images/style1/shownav.png
to:
/wp-content/themes/synapse-child/images/style1/shownav.png

As for the third-level submenus, I’ve fixed this in 3.0.7. You should be able to update and see this change immediately.

Hope this helps.

 

{name}
Rank

Total Posts: 7

Joined 2013-04-12

PM

 

like a charm

thank you very much grin

{name}
Rank

Total Posts: 1

Joined 2013-10-27

PM

 

I posted a question earlier regarding the dropdown menu problem.

Looks like I have the Menu Style configured as Select Dropdown.  I can’t read the my menu.
But if I choose Toggle Dropdown.  It does show up properly.

Maybe a bug in the Synapse v3.0.7?

http://armada.rnrwang.org/