[Support request] Social icon next to the header on mobile view

[Frank]

I’m currently trying to design the header at http://www.lanordischvita.de. I’ve tried using an elements hook with no success. Now I have integrated the social icons as a widget in the header with GenerateBlock (container/button). The desktop view works. How do I get the icons to the right of the logo in the mobile view? No matter what I set, the icons are always above the logo. I don’t know much about CSS. Can you help me?

[Fernando]

Hi Frank,

Yes, we can help you.

Can you try adding this in Appearance > Customize > Additional CSS?:

@media (max-width: 768px) {
    header.site-header > .inside-header {
        display: flex;
        flex-direction: row-reverse;
    }
}

This should place the Social icons you have to the right of the logo on mobile.

[Frank]

Hello Fernando,
that looks a lot better, thanks. When I hold the phone sideways, the logo shifts to the right, but it should stay on the left. Did I do something wrong? And could the icons also be centered horizontally?

[David]

Hi there,

can i suggest a different method?
If yes, then:

1. remove any CSS you have so far.

2. In Customizer > Layout > Primary Navigation set the Alignment Right and then the Location to: Float Right

3. remove the header widget social buttons, before doing so – copy the Buttons blocks as you can reuse it.

4. In Appearance > Elements -> Add New Block Element
4.1 Add (Paste in ) your social icon buttons
4.2 Set the Hook to: menu_bar_items
4.3 Set the Display Rules to Entire Site
4.4 Publish

5. Add this CSS to your site:

@media(min-width: 769px) {
    .inside-navigation .menu-bar-items{
	order: -1;
	flex: 1 0 100%;
	justify-content: flex-end;
    }
}

[Frank]

Hi David,
I fail at point 4. I choose “Block” for Elements and add the icons. I can’t select 4.2 and 4.3. I don’t find an entry “menu-bar-item” and then also no “Enture Site”.

[David]

4.2 Whilst in the block element editor, the right hand sidebar there are two tabs, one to them is Titled: Element. Selec that and you should see the screenshot provided here:

https://docs.generatepress.com/article/block-element-hook/

4.3 Do you see the Display Rules panel ?

[Frank]

Under Hook there was no entry with “menu_bar_items”. So I made a custom hook with this entry. I set the display rules to “Entire page”. I added the CSS in the Cutsomizer under additional CSS. Cache is emptied. But the social icons are not displayed. Instead, the menu is now in the top right corner of the desktop view, which is not great. What can I do?

[David]

OK, if that hook is not showing the go to Customizer > General and change the Structure to Flexbox.
Then edit your Element and you should see that hook ?

[Frank]

Now I can select “menu_bar_item” and the mobile view is perfect, great. Can I get the menu in the desktop view at the bottom of the header? It’s in the middle now.

[Ying]

Try this CSS for desktop:

@media (min-width: 769px) {
  #primary-menu {
      order: -1;
  }
}

[Frank]

Hello Ying,
thanks for trying, unfortunately without success. Both CSS together result in an exchange of menu and icons (menu even higher and icons below). Your CSS alone puts the icons in the menu line, but the menu remains at the top. Unfortunately I can’t get the menu to the bottom edge of the header.

[Ying]

Both CSS together result in an exchange of menu and icons (menu even higher and icons below)

That was my intention, thought it was what you were looking for.

I don’t think I understand your request very well, any chance you can make a mockup?

[Frank]

Anyway, thanks for trying. 🙂 Everything looks perfect in the mobile view. My idea only affects the desktop view. Is it possible to put the primary menu horizontally at the bottom of the header? So put down? It’s still in the middle now.

[Fernando]

I see. If you want the primary menu at the bottom of the Header, you can go to Appearance > Customize > Layout > Primary Navigation, and then set the Navigation Location to “Below Header”.

Then, we can fix the Mobile Header afterward.

If you’re referring to something else, can you provide a sketch or a reference site with a similar Header?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Frank]

Hello Fernando,
then we would be back where we started at the beginning. 🙂 If I put the primary menu under the header, the header becomes very tall again. Everything looks great now. It would only be nice if the primary menu was at the bottom in the desktop view, but not under the logo. If there is no easy solution, no problem. But if you have an idea, you’re welcome.

[Author]

Posts