Placing Social Icons in mobile menu / Header Builder

Support
#1

Hi there,

I’m trying to create a mobile header such as this:

https://www.dropbox.com/s/l25wbq2qz9iietj/Screenshot%202019-10-29%2016.50.47.png?dl=0

I managed to position the menu, and place a background, but how would you go about inserting extra content (i.e.: the social icons) under it?

Thanks!

#2

Hi @Pbalazs89,

Thank you for writing in, please add your Social elements in the same Container as your Navigation element is, then inpsect that Container, set it to Row and Wrap


Then inspect your Navigation element and set its Self Flex to `Custom` and set the Flex Basis to `100%`

This will push the Social Elements under the Navigation element.

Hope it helps,
Cheers!

#3

Sorry, I did not explain this all too well. So I’m using a navigation collapsed element, which opens up from the side with the ul menu items. And I’d like to add the social Icons under this. So I don’t want to create a separate header for the menu, but want to extend the functionality of the collapsed nav menu. Here’s a menu to better illustrate:
Video

Thanks a bunch!

#4

Hello @Pbalazs89,

You are using the Navigation Collapse element. Please be advised that this element will only display the navigation. You cannot add any custom elements like icons. I would recommend to do the following instead:

1.) Go to Pro > Global Blocks and create a new global block.

  • In your global block, please insert a section, row and one column.
  • You will then have to add a navigation collapse element and the icons for your social profile.
  • Saved your changes and take note of the global block shortcode.

2.) Edit your header again,

  • Remove the navigation collapse element
  • Replace it with Content Area Off Canvas element.
  • Insert the Global Block shortcode in the Content Area Off Canvas element content.

Hope this makes sense.

1 Like
#5

Thanks a bunch! Worked like a charm!

#6

You’re always welcome @Pbalazs89!

Glad @RueNel was able to help you here. Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.