[George HParticipant]

Hey Guys,

Happy New Year!

I want to know if it’s possible with X currently, or if a plugin is required to make a full screen, or slide out menu navigation.

I want a menu icon to be in the menu bar and then when clicked on, the menu opens up as a modal fullscreen, or alternatively, slides out onto the page.

If you want to see examples of what I mean, please see the links below.

Full Screen Menu Example: http://www.ngv.vic.gov.au/

Slide Out Menu Example: http://www.artserieshotels.com.au/

I know both of these websites are not made with wordpress, but is this something theme X can do? Or can you recommend any type of plugin?

Thank you in advance.

[Paul RModerator]

Hi George,

Thanks for writing in!

You can utilize the header widgets for this.

You can try in one of our demo site.

http://theme.co/x/demo/integrity/1/

Click on the + sign

http://screencast.com/t/HqX7V3ExiaVy

Hope that helps.

[George HParticipant]

Thank you, that’s similar to what I need.

Can you provide any styling to achieve the menu look, as in:

http://www.ngv.vic.gov.au/

or

http://www.artserieshotels.com.au/

Please see screenshot

https://selectretreats.com/wp-content/uploads/2015/01/2015-01-06_2001.jpg

Thank you very much.

[Paul RModerator]

Hi George,

You can add this under Custom > CSS in the Customizer.

body .x-btn-widgetbar {
     border:25px solid #000;
     font-size: 30px; 
}

body .x-btn-widgetbar .x-icon-plus-circle:before {
     content: "\f0c9";
}

You can change 25px and 30px to achieve your desired look.

Hope that helps

[George HParticipant]

Hi Support,

Unfortunately that didn’t quite work.

Screenshot:

https://selectretreats.com/wp-content/uploads/2015/01/Screen-Shot-2015-01-08-at-4.08.35-pm.png

https://selectretreats.com/

[Paul RModerator]

Hi George,

Sorry about that, please add the code below in your child theme’s style.css

body .x-btn-widgetbar .x-icon-plus-circle:before {
     content: "\f0c9" !important;
}

Hope that helps.

[George HParticipant]

Hi,

That makes more sense and kind of does what I wanted.

How can i get the whole icon to change color on hover. Currently it’s just the diagonal corner.

Also, i tried changing the logo from plus-circle to align-justify but it doesn’t work after clearing cache.

[George HParticipant]

Also,

Is there a better way of making a slide out menu, or full screen menu, i.e. a plugin you can recommend?

This is because when you click and open the native header widget area, as you’ve suggested i do, there’s quite a bit of lag, try and do it a few times on my site: selectretreats.com

This lag is pretty bad!

[Paul RModerator]

Hi George,

I am sorry but I could not find a similar plugin.

To make the whole icon change on hover, you can add this under Custom > CSS in the Customizer.

.x-btn-widgetbar:hover {
      border-color: #1eb4e1;
}

To fix the lag, you can try the code below.

.x-widgetbar.collapse {
    -moz-transition-property: none;
-webkit-transition-property: none;
-o-transition-property: none;
transition-property: none;
}

Hope that helps.

[George HParticipant]

Thank you.

The hover code is perfect.

The lag code works well, but the contents of the widget header kind of linger still.

I tried to change this, but it did not work.

Originally:

body .x-btn-widgetbar .x-icon-plus-circle:before {
     content: "\f0c9" !important;
}

Desired:

body .x-btn-widgetbar .x-icon-align-justify:before {
     content: "\f0c9" !important;
}

Any reason why the align-justify icon doesn’t show?

Thank you.

George

[RadModerator]

Hi George,

Thanks for posting in.

The align-justify should work, and its code is “\f039”. Could you try it again?

I just tried it and it works.

Thanks.

[George HParticipant]

This reply has been marked as private.

[George HParticipant]

Also, when in mobile view, the widget area is behind the floating mobile menu. Is there anything that can be done to not cover it up?

[Paul RModerator]

Hi George,

To change the icon to align justify, you need to use the code.

body .x-btn-widgetbar .x-icon-plus-circle:before {
     content: "\f0c9" !important;
}

The code will override the icon circle in the widget button, that way we don’t need to modify the header widgets core code.

Not sure what you mean by “the widget area is behind the floating mobile menu”.

Can you provide us a screen shot.

Also please update your theme and plugin to latest version.

https://theme.co/x/member/kb/updating-your-theme-and-plugins/

Thanks

[George HParticipant]

Thanks,

For an unknown reason I cannot get it to work.

I’ve updated the theme and associated plugins which has pretty much broken my site.

Please can you have a look, the page layout is broken, mega-menus broken and other things.

Not sure what is going on.

[Author]

Posts