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

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.

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;
    }
}

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 ?

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 ?

Try this CSS for desktop:

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

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?

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