• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 17.01.19, 17:43
  • Opened by: Botter Sylvain
  • Closed by: Marek
  • Closed on: 23.01.19, 14:41
  • Reason: Closed
  • Comment: Glad to help!

Ticket #13561 - How to hide elements on mobile version in the header builder section? possible?

Hello, how can hide elements from page builder only on mobile version? If i delete for example the shopping cart on mobile preview, then it’s also deleted on desktop version?

Comments

Marek 17 Jan 2019, 17:47

Hi, Botter.
You can do that in following way:
Go to Theme Settings → Custom CSS and add css code:

@media (max-width:768px) {
.hide-for-mobile {display:none}
}

Than go to Page builder and add this class “hide-for-mobile” to a block you want to hide

Botter Sylvain 18 Jan 2019, 17:10

Hello, awesome! thanks so much!

I have a website reference that is www.fooby.ch. I try to get the same behaviour, button, logic.

Attached the file with my questions all in one, I put some number on the pictures. It’s simple and short questions, just a bit lost to start!

1) Where to reduce spacing between menu elements?
2) Where to customzie “pk_customlinks”? –> have only one icon (the avatar) going to the login/signup page.
3) Where to reduce the height spacing between slider and menu?
4) Where to align left the menu?
5) Logo size and alignement on mobile?
6) Should be fine, same as 2)

thanks a million in advance :)

Wish you a great weekend!

Sylvain

Marek 19 Jan 2019, 11:53

Hi, Botter.
There is no some button or an option what you can change to adjust spaces or sizes. You have to add CSS code for that. Taka a look at this video to understand how to work with Chrome Developer Tools https://www.youtube.com/watch?v=wcFnnxfA70g it will let you change anything you want

Here is an example: http://take.ms/eIplW

Marek 19 Jan 2019, 11:54

If you will have any question, please ask, I’ll try to help you

Botter Sylvain 19 Jan 2019, 18:04

Wow this tool is awesome, I did my first change ;) Menu padding!

Question, is it right to change it in theme.css? When an update of theme, it will not be erased?

I will let you know step by step if I have some issues!

Have a great weekend!

Botter Sylvain 19 Jan 2019, 18:10

Okey, question to understand where to search css elements..

I pointed these green margin with 45px of padding up and bottom and would like to remove theme. It’s written in the class

–> pts-container-wrap.header1

When I search into the theme.css, there is nothing about this class?

Marek 21 Jan 2019, 10:17

you can override current styles if you can’t find it. In this case try to use:

#header .pts-container-wrap {YOUR STYLES}

but you can also add margins/paddings in your back office in the row/columns settings of your page builder layout

Botter Sylvain 22 Jan 2019, 09:01

Hi thanks, so it’s fine to modify in theme.css ? Will not be erased next update?

Thanks for your help, amazing!

Marek 22 Jan 2019, 10:54

You can add this style to your custom CSS. Go to Theme Settings → Customer CSS

Botter Sylvain 22 Jan 2019, 15:14

Hello Marek,

Sorry to bother you again,

I did a change in custom CSS but the code is not replacing the existing one, why? See attached. Try just to diminue the padding up and bottom from 45px to 0 or 5 px…

Once I get the right methodology will bother you less.. promise, sorry! and thanks again

Marek 22 Jan 2019, 15:20

you can try to add “!important” in the end, like this:

padding-top:5px !important;
Botter Sylvain 22 Jan 2019, 15:38

Same here but from the alysum theme settings, see attached,

I put “black” as color for the top menu and still gray… see attached

–> https://www.yaksha.ch/fr/

Marek 23 Jan 2019, 12:38

It’s because you are using Header Builder. In this case you can change background in the Layout settings http://take.ms/Kii6r

Botter Sylvain 23 Jan 2019, 14:41

Oh yes, thanks it works for both things I wanted to change :) million thanks!

Marek 23 Jan 2019, 14:41

You are welcome