[Resolved] off canvas overlay menu troubles

[STENCIL]

Hi there, I’ve been trying my best to sort a few issues with my off canvas overlay menu for mobile but I can’t work it out! Love some help…

I’ve added as a hook for the overlay menu, but I’d like it to left align, ideally so it replicates the logo on the mobile header. I’ve sized it to match (I think) and altered the top margin but aligning left doesn’t seem to be working – what am I missing? Or perhaps there is a better way to do this?

And my widget elements – aren’t responding to the type size set – I’ve tried css, tried editing the widget typography, tried all the typography settings and making custom but nothing seems to effect it. Can you direct?

Thank you for any assistance!

If it help, this is what I have setup…

#generate-slideout-menu.do-overlay .slideout-menu li {
    width: 100%;
	padding-top: 30px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: left !important;
}

#generate-slideout-menu.do-overlay .inside-navigation  {
	max-width: 100%; !important;
	padding-top: 25px;
	padding-left: 0px;
	padding-right: 0px;
}
#generate-slideout-menu.do-overlay .inside-navigation .main-nav li {
 border-bottom: 1px solid #0e9388;
	padding-top: 30px;
	margin-left: 15px;
	margin-right: 20px;
}

#generate-slideout-menu.do-overlay .inside-navigation .slideout-widget {
				margin-top: 0px
    }

#generate-slideout-menu.do-overlay .inside-navigation .widget_lsi_widget
{
	margin-bottom: 0px;
	margin-top: 80px;
    }

#generate-slideout-menu.do-overlay .gb-block-image {
	position: absolute;
	margin-top: -12px;
	margin-left: -40px;
margin-right: 0px;
}

#generate-slideout-menu.do-overlay .main-nav {
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 0px;
}

[Ying]

1. Set the GB image block’s width to 198px to respect its aspect ratio.

2. Change this CSS

#generate-slideout-menu.do-overlay .gb-block-image {
    position: absolute;
    margin-top: -12px;
    margin-left: -40px;
    margin-right: 0px;
}

to this:

#generate-slideout-menu.do-overlay .gb-block-image {
    position: absolute;
    left: 0;
    top: 14px;
}

[STENCIL]

Ah thank you, the missing width seemed to make a big difference – I figured it would keep it’s proportions with just the height sized!

Any idea on the widget part?
I can’t change the size of the email address and phone number – changed typography settings in appearance, no setting seems to effect it; changed the typography size within the widget; tried to add a custom typography in appearance; tried css – non are doing anything to it. Any help?

Also really like the social icons and that content to sit at the bottom of the window on all devices. The Widget CSS is in the above code.

[Fernando]

Hi Stencil,

Can you try the selector for the off canvas email and font text:

.main-navigation .gb-container > .gb-inside-container > .gb-headline > a

You can use the typography still.

With regards to the social icons widget, how did you add it? Is it a different Block Element? You can set a higher priority value if so.

[STENCIL]

What do you mean, sorry? Where am I looking?
Both social icons and the email etc text are in the off canvas panel – but the text is in a block together and the icons are Lightweight Social Icons.

[Ying]

For the email and phone, as you are already using GenerateBlocks, why not use the Headline block? Then you will be able to control the style of the text.

For the social icons, the style is controlled by the plugin, could you check if there’s any setting within the plugin?
if not, you can use this CSS to override it:

.icon-set-lsi_widget-2 a, .icon-set-lsi_widget-2 a:visited, .icon-set-lsi_widget-2 a:focus {
    font-size: 20px !important;
}

[STENCIL]

The size of the social icons were fine, it was just the email address and tel that wouldn’t change even though it was a Headline block, like it was ignoring the settings!

I remade that part as an Element, seemed to be conflicting with the header widget, and still wouldn’t change but I found the css for it and works. Thank you though!

`.main-navigation a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items {
font-weight: 300;
font-size: 15px;
}’

[Ying]

Glad to hear that 🙂

[Author]

Posts