2 responsive questions

Support
#1

Hi guys,

2 questions

  1. How can I switch the menu on mobile to the “Burger-Menu”?
  2. When I have 2 columns with image left and text right, it shows the same on mobile so the img gets very small and the text very long vertically. I want it though on mobile on top of each other so both parts are fitting to screen. How can i do this?

Thx a lot

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Sure. :slight_smile:
dev.fenner-musik.de

#4

Hi,

1- On PRO Theme the inline menu does not become a hamburger menu automatically as X.

We choose that so you have much more flexibility when building your header.

Each Bar, Container, and Element on the header builder have a Customize tab.

Click on this customized tab and you will find an option to header the element based on screen width.

Hide the inline menu for tablets and mobiles, and add a mobile menu like, slide in or modal menu and hide on the bigger screen widths.

2- Regarding this please provide your login credentials in a se cure note so we can understand why it is behaving like this.

Thanks

#5

Ok, thank you.

Here is my login data

#6

And another question to nr. 1. Now i made another header for mobile, but how can I assign them to the same page. When I try to assign them, then I have to put it instead of the original one, not additionally, which I want. What can I do?

#7

Hi there,

  1. You don’t need to add one header for each device. You only need one header for all devices and assign them to your target page,

Then add navigation-inline element (hide it from mobile) and navigation-collapse element (hide it from the desktop). As you can see, you added two menus on the same header, but you only hide them from the specific device.

You can try adding header from existing templates and examine how they are done. The visibility option is always available in customize tab of an element.

Plus, you can use device preview (the mobile icon on the side among the save buttons) and switch to different device previews. So you could see how it looks for the elements you hide and display for different devices.

  1. It’s because of this display: flex;, you added it to the row’s Style input. You should remove that, columns are already styled as columns, there is no need for flex styling.

Thanks!

#8

Hm, ok now it works, but now, my quotations and images arent centered vertically anymore.

I discussed this here in the forum (https://theme.co/apex/forum/t/align-center-images/8594/5) and the idea (display: flex; justify-content: center; align-items: center;) came from another user.

Do you have any other idea, how can i have both things?

Thank you

#9

Hi there,

In that case, you should class based styling rather that inline style. Please add this CSS to your global custom CSS.

@media ( min-width: 980px ) {

.force_flex {
display: flex !important; justify-content: center !important; align-items: center !important;
}

}

Then simply add force_flex to your row’s Class input field.

Thanks!

#10

nice, thx a lot :slight_smile:

#11

You’re welcome!