- This topic has 31 replies, 4 voices, and was last updated 10 years, 9 months ago by
.
-
Posts
-
Hello!
Please, where I can find the style sheet for change the features of the menu in mobile view?
I know I can make some changes in Weaver admin, but i simply can not make the itens of the menu with a greater vertical separation (they are too close for touch screens).Thank you all,
Jose.You should NEVER edit the style sheet or any theme files.
If needing to change template files it should done with a child theme
All custom CSS is done by using either CSS+ boxes, or for more complete rule, Advanced Options > Head Section > Custom CSS Rule box.
The height of the Slide open mobile menu items is done with the rule
.widget-area .menu-vertical ul ul a, .menu-vertical ul ul a {padding:4px 5px 4px 25px}
So you can override that by putting the same rule with your own values in (the top and bottom values are the 4px ones in the rule)
If not working, we need a link to your page, so we can give you the proper CSS to do the job
Thank you very, very much for the advices!
The link is < http://www.zenite.nu >. But you should acess via a mobile device to see the problem I mentioned.
The itens of the mobile menu appear to close each other and I would like more vertical spacing between them.The rule .widget-area .menu-vertical ul ul a, .menu-vertical ul ul a {padding:4px 5px 4px 25px} seems not affect this.
Thank you again.
Have you tried to add the rule below (changi9ng the initial 4px value to a bigger one like 10px) in Advanced Options > Head Section > Custom CSS Rule box.
.widget-area .menu-vertical ul ul a, .menu-vertical ul ul a {padding:10px 5px 10px 25px}
If so and it does not work, please leave the rule as shown above in the custom CSS rule box and post back
On a side note, the Gadgets you used in the header are totally non responsive. Observe what happens when you reduce your browser size.
The “Custom CSS Rules” box (in Advanced Options – <Head Section>) now has the rule you told me – but I didn´t see any change in the menu for mobile devices.
I also noticed the image header when I reduce the browser size: a small image on the left break the page. Is that you saw too?
if you indeed put the rule in Advanced Options > Head Section > Custom CSS Rule box, there is a problem because the rule is not there.
This usually can point to some syntax error in your custom CSS that breaks the CSS file.
You need to run ALL your custom CSS from the Custom CSS Rule box and the CSS+ boxes in a CSS Validator to try and find the syntax error, look especially for open and not closed curly brackets.
It is indeed in the right place and has no syntax error.
But I think I found the problem: I use Jetpack and the ‘Custom CSS’ module is active. When I put the rule there, I see changes in vertical spacing (mobile menu).Somehow Jetpack is overlaping Weaver in this case.
So, you recommend deactivate it and put those custom rules in Custom CSS Rule box?You should definitely deactivate any Custom CSS plugin, and put all your custom CSS either in weaver options CSS+ boxes when applicable, or in the Theme Custom CSS Rule box
Thanks Scrambler I am going to do this right now!
One last question: what rules I have to control menu appearance in mobile devices?
You mentioned .menu-vertical and .menu a but what if I wish to change the font family and size?menus are complicated as there are many different kinds, like primary, secondary, extra menus, widget…
You can read the thread below for more pointers on how to style other menu differently from the main one
http://forum.weavertheme.com/discussion/4567/infos-and-examples-for-custom-css-rules-part6#Item_1
The Slide open mobile menu is a vertical menu, so the section about /*Styling the Vertical menu differently from main*/ should be what you are looking for.
/*General text and background color*/
.menu-vertical li a, .menu-vertical a:visited {color:white !important;background-color:transparent !important;}just replace the color and background color in the rule above by your Font-size and font family css propeties
Ultimately if you cant figure out a specific property, post back with link and details
I expected to close this discussion now and mark it as “answered” but I am facing a new problem…
When I put all my custom css rules in Advanced Options > Head Section > Custom CSS Rule box, and deactivate the Jetpack Custom CSS module my site lost most of the apperence I configured for it (I was forced to turn back, otherwise the site would keep broken).
Any clues about what could be happened?
You would need to be more specific and provide a link to the page that has lost styling with details about what has changed and how it was before.If the things that were lost corresponded to rules you moved into the custom CSS rule box, you may have transferred some syntax errors that broke the CSS file.If the things that were lost did not correspond to any of the Custom CSS, how was the styling does, was it theme options, or plugin stuff?Again we cannot diagnose with very specific details and a link to the broken site.But as you put all your custom CSS in the Theme Custom CSS rule box, run it through a CSS validator to make sure it is all correctThank you for your observations, Scrambler.
Fisrt, I will try to figure out what could be happen by myself because, as I told you, I can not simply deactivate the Jetpack Custom CSS module and move my rules to the Custom CSS Rule box (this broke the site apperance).
By now, what I can say is there is no syntax errors in that custom CS rules.
Please, keep this discussuion open. I hope to bring news in a few days.
Thank you.
- The forum ‘ Weaver II Pro’ is closed to new topics and replies.