X-pro Header - social elements in dropdown menu

[MCC]

Hi guys, not sure if this is possible but I’ll ask just in case – I have a desktop menu with a navigation dropdown, logo, and then some social elements and a search element. I was wondering if it would be possible on mobile devices to move the social elements (and search?) into a dropdown. I thought about using the Content Area Dropdown, but I’m not sure if it would support these elements or if it’s intended purely for text.

As you can see from the below screenshots, it’s not the end of the world if this isn’t possible, but would neaten everything up in the top bar.

One other question regarding the desktop header menu – is there a way to get the logo to centre up in that space, regardless of how many elements are added to the sections of the left and right of the header? At the moment it’s been forced to the left (the cyan line indicates the page centre) because there are four elements in the right section and only one in the left section. Other than manually adjusting the margins, which is going to potentially mess things up on different screen sizes, is there a way to do this?

Desktop

Mobile

[friech]

Hi @MCC,

Thank you for writing in, to center your logo please set all your three containers’ self-flex layout to Fill Space Equally

Regarding the social icons, yes that is possible, first please add your social icons on your menu by following the method provided here.

Now on those social icon menu items, apply a class hide-icon

• 

Then add this to Theme Options > CSS, this is the code that will hide the icons on the dropdown menu when viewed on desktop.

@media (min-width: 768px) {
	.hide-icon {
		display: none !important; 
	}
}

You need to update the min-width: 768px on that code to correlate on when those “desktop social icons” will be hidden.

Use the Hide During Breakpoints feature for hiding those “desktop social icons”.

Hope it helps,
Cheers!

[MCC]

This worked perfectly, thank you so much!

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.