Fly-out menu formatting, transparency and screen size. - Support

Tagged: formatting, screen size, transparency

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
May 30, 2014 at 9:51 am #272292

danfarberoff
Participant

Hi

1) I’d like to enable the mobile fly-out menu for screens larger than the maximum 990px available in the theme options. What would be the code for defining the screen-size limit for activating the fly-out menu?

2) I’d like to introduce transparency to the fly-out menu (so the menu block is semi-transparent, with page-content visible through it), and also center-align the menu elements (rather than the default left-align).

3) The current animation for the fly-out menu has a zoom in from top-right to left effect. Is there a way to change the animation direction? (Top to bottom? Or just fade-in?)

And one last thing. I’ve received an email about the latest theme update, but the update isn’t available yet through the WordPress dashboard.

Many thanks

Dan

May 30, 2014 at 10:06 am #272295

danfarberoff
Participant

And one more:

4) For the standard header, I’d like to make the transparent menu (‘transparent header’ selected) not be fully transparent, so that the menu block remains about 20% visible.

Thanks.

May 30, 2014 at 4:50 pm #272465
Yigit
Keymaster
Hey!

Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
1-
```
@media only screen and (max-width: 1140px) {
.main_menu { display: none !important; }
#advanced_menu_toggle, #advanced_menu_hide, #mobile-advanced { display: block !important; }}
```
2-
```
#mobile-advanced { background-color: rgba(255,255,255,0.7); }
#mobile-advanced li { text-align: center; }
```
3- It is possible but requires adjustment on the current code. Please hire a freelance developer for that customization
4-
```
.main_menu { background: rgba(255,255,255,0.6); }
```
Best regards,
Yigit
May 31, 2014 at 10:09 am #272749

danfarberoff
Participant

Thanks Yigit

1 – Perfect.

2 – Works. Mobile menu items are center aligned, but: The menu sub-items are center aligned and also tabulated. How do I remove the tabulation for menu sub-items in mobile menu?

4 – The code is:
#header_main { background: rgba(255,255,255,0.6); }

Cheers,
Dan

May 31, 2014 at 1:45 pm #272767

danfarberoff
Participant

And another question about the fly-out mobile menu:

The menu toggle icon appears within the page content wrapper, but the collapse menu icon appears on the very edge of the screen, outside the page content wrapper.

The div for #advanced_menu_toggle comes up as

<div id=”header_main” class=”container_wrap container_wrap_logo”>
<div class=”container”>

but the div for #advanced_menu_hide comes up as

<div id=”wrap_all” class=”show_mobile_menu”>

How do I assign #advanced_menu_hide the same div as #advanced_menu_toggle so they appear in the same location?

Thanks!

June 2, 2014 at 2:02 pm #273250
Yigit
Keymaster
Hi!

This is how it looks on my local installation – http://i.imgur.com/lkMukaY.png
Can you post the link to your website and a screenshot showing the issue?
Please add following code to Quick CSS as well
```
@media only screen and (max-width: 480px) {
#advanced_menu_toggle { top: 65px;
right: 23px;
position: fixed;
z-index: 999;
margin-top: 0;}
#header_meta { z-index: 1; } }
```
Regards,
Yigit
June 4, 2014 at 10:38 am #274433

danfarberoff
Participant

I’d like to reposition #advanced_menu_hide, not #advanced_menu_toggle.

I’ve introduced transparency to the mobile menu. You can see the result here:

The theme CSS places the icon #advanced_menu_toggle right: 0px; top: 50%; in relation to “header_main” “container”, but the icon #advanced_menu_hide is placed top: 44px; right: 23px; in relation to “wrap all” “show mobile menu”, so they don’t appear one directly on top of the other. How do I force #advanced_menu_hide to position itself directly above #advanced_menu_toggle in all screen dimensions?

Thanks.

June 4, 2014 at 1:08 pm #274466

Yigit
Keymaster

Hi!

I wanted to check your website it is “forbidden”. Do you mind posting a temporary login so we can see the actual website?

Best regards,
Yigit

June 7, 2014 at 2:10 pm #276061

danfarberoff
Participant

This reply has been marked as private.

June 9, 2014 at 1:40 am #276312
Yigit
Keymaster
Hey!

Please add following code to Quick CSS as well
```
@media only screen and (max-width: 768px) and (min-width: 480px) {
.container #advanced_menu_toggle {
right: -34%;
top: 54%;
}}
```
Cheers!
Yigit
June 9, 2014 at 10:42 am #276382

danfarberoff
Participant

Thanks Yigit

Unfortunately that solution just throws the menu-toggle icon completely off the screen.

Cheers.

June 9, 2014 at 11:18 am #276400
Yigit
Keymaster
Hi!

Can you try following instead
```
@media only screen and (max-width: 768px) and (min-width: 480px) {
.container #advanced_menu_toggle {
right: -20%;
top: 54%;
}}
```
You may need to adjust right value to overlap buttons perfectly

Best regards,
Yigit
June 10, 2014 at 12:02 am #276751
docperi
Participant
I got the same problem …
And i dont understand it cause in the layout.css both have same css
```
#advanced_menu_toggle, #advanced_menu_hide{
position: absolute;
border-radius: 2px;
height: 46px;
width: 46px;
line-height: 46px;
text-decoration: none;
text-align: center;
right: 0;
top: 50%;
margin-top:-23px;
z-index: 10000;
border-style:solid;
border-width: 1px;
font-size: 30px;
display:none;
}
```
Strange … the positions by % (right, top) doesnt work fine …
June 10, 2014 at 1:15 am #276769
docperi
Participant
I found a good solution for me :-)
You can see it here in action

Maybe my code can help you out. I did some custom-style to the logo and menu-position.
Use and modify it to your gusto ;-)
```
/*-------------  Mobile-Menu  & Logo --------------- */

#mobile-advanced{
	width:100%;
	right:0;
	position: absolute;
	z-index: 100;
	top:-100%;
	padding:125px 0;
	background-color: rgba(0,0,0,0.7); 
	overflow: hidden;
	border-left-style: solid;
	border-left-width: 1px;
	margin:0 0 0 -2px;
	-webkit-transform: 	scale(1);
	-moz-transform: 	scale(1);
	-ms-transform: 		scale(1);
	transform: 			scale(1);
	-webkit-transition: all 0.9s ease;
	-moz-transition: 	all 0.9s ease;
	transition: 		all 0.9s ease;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	display:none;
	}
	
@media only screen and (max-width: 798px) {
#mobile-advanced{
	padding:112px 0;
	}
}
	
	
.avia_transform3d #mobile-advanced{
	-webkit-transform: scale3d(1);
	-moz-transform: 	scale3d(1);
	transform: 	scale3d(1);
	}

.show_mobile_menu #mobile-advanced{
	-webkit-transform: translate(0, 100%);
	-moz-transform: 	translate(0, 100%);
	-ms-transform: translate(0, 100%);
	transform: 			translate(0, 100%);
	}

.avia_transform3d .show_mobile_menu #mobile-advanced{
	-webkit-transform: translate3d(0, 100%, 0);
	-moz-transform: 	translate3d(0, 100%, 0);
	transform: 	translate3d(0, 100%, 0);
	}

#mobile-advanced a{
	background:#fff;
	}

@media only screen and (max-width: 968px) {
#advanced_menu_hide{
	right:5%!important;
	margin-top:-6px!important;
	}

.responsive .container {
    width: 90%;
	}
}

@media only screen and (max-width: 767px) {
#advanced_menu_hide{
	right:5%!important;
	margin-top:-11px!important;
	}

.responsive .main_menu{position: static; margin-right:0px;}
.responsive .logo{position: relative; height:90px!important; float:left;margin-left:10px;}
.responsive .mobile_slide_out .logo{float:left; margin:10px;}
.responsive .logo a , .responsive .logo img{margin-left: 10px auto; max-width: 90%!important;}

.responsive .mobile_slide_out .logo img {
	margin-left: 5px;
	float:left;
	}
	
.responsive .logo a, .responsive .logo img {
    height: auto !important;
    max-width: 90%;
	}

.responsive .mobile_slide_out .logo {
	left: -5%;
	}
}
```
- This reply was modified 10 years, 6 months ago by docperi.
June 10, 2014 at 3:26 am #276800

Ismael
Moderator

Hey!

@docperi: Thank you for sharing the code. I hope it helps the OP. :)

Cheers!
Ismael

June 11, 2014 at 5:16 pm #277616

danfarberoff
Participant

@docperi: Thanks! What I was looking for.

You’re right that the CSS for both is the same – the problem, as far as I can see, is that they are placed in different divs: #advanced_menu_toggle measures the position from the edge of the page content width, while #advanced_menu_hide measures it from the edge of the screen. I have no idea how to edit the html to re-order this in the simple way. Nice solution.
Author

Posts