- 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
Hi, Botter.
You can do that in following way:
Go to Theme Settings → Custom CSS and add css code:
Than go to Page builder and add this class “hide-for-mobile” to a block you want to hide
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
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
If you will have any question, please ask, I’ll try to help you
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!
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?
you can override current styles if you can’t find it. In this case try to use:
but you can also add margins/paddings in your back office in the row/columns settings of your page builder layout
Hi thanks, so it’s fine to modify in theme.css ? Will not be erased next update?
Thanks for your help, amazing!
You can add this style to your custom CSS. Go to Theme Settings → Customer CSS
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
you can try to add “!important” in the end, like this:
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/
It’s because you are using Header Builder. In this case you can change background in the Layout settings http://take.ms/Kii6r
Oh yes, thanks it works for both things I wanted to change :) million thanks!
You are welcome