-
Posts
-
Hi everyone,
I would like to adjust the opacity of the background color for the Flyout and the submenu (semi-transparent).
And I want to remove the shadow of the submenu.
How can this be done?Also, how can I reduce the padding left (?) in the flyout so that the links are getting closer to the edge?
I hope my questions are clear. I am not a techie.
Thank you!
Hey VCS33,
Can we please check a link of your web site, to be able to help?
Thank you
Best regards,
BasilisHi,
To make the flyout menu transparent Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
/* Background overlay */ #top .av-burger-overlay { background-color:rgba(0,0,0,.85)!important; } /* Menu area background */ #top #wrap_all .av-burger-overlay-scroll { background-color:rgba(255,255,255,.85)!important; }To change the submenu background and shadow effect.
.header_color .main_menu .menu ul li a, .header_color .main_menu ul ul { background-color: rgba(255,255,255,0.5) !important; box-shadow:none; }To reduce the padding:
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a { padding-left: 20px; }Best regards,
VinayHi Vinay,
Thank you! All worked out fine.
Though, the transparent flyout didn’t look as I expected (even after playing with the colours and transparency setting) so I’ll leave it like it is.I am doing some tweaking these days so I might come up with more questions regarding micro styling.
The next one would be: how can I adjust the colours of the toggle (scroll to top), especially the outline and the little arrow in it?
Thank you for your assistance!
Hi,
Glad everything worked out well! :)
Please feel free to modifications questions, we are always happy to help you!
To remove the border please add the below code
#top #scroll-top-link { border:none!important; }Please check this link to add custom style to the scroll to top
Best regards,
VinayThanks for pointing me to the documentation, Vinay – most helpful!
There is no hint how to change the colour of the arrow but through „inspection” of that toggle I tinkered it myself like this:
#scroll-top-link {
color: #d62a2a;
border: 1px solid #ffffff;
}++
Now I have two widgets in my footer. A simple text widget and a newsletter (wpens_easy_newsletter).
I want the font of the text widget to have another colour than the newsletter font.
I used this:/* Footer fonts */
#footer .textwidget,
#footer p {
font-family: ‘source serif pro’; font-style: regular; color: #d62a2a; letter-spacing: 0.04em;
}But now the newsletter font is red too and I don’t know how to change this.
++
Also, I couldn’t find a way how to set the font of the field description (contact form) to regular. It’s bold and I don’t like it like that. I used:
/* Required field (Styling the asterisk ) */
.avia_ajax_form label .required {
font-family: ‘maven pro’; font-style: regular;
}But it doesn’t work.
Thanks in advance!
The search box is giving me a hard time. I tried many snippets I could find here or elsewhere on the web. What I want is:
– remove the shadow around the box
– when „active“ the magnifier is white in a red square. I only want it to be red without being in a square.
– I want to adjust hight and width of the search box. Is this the correct snippet?
#top #searchsubmit, .ajax_load {…}Thanks!
Hi,
1.) Use the following css code to remove the shadow around the box.
.avia-search-tooltip { box-shadow: none; }2.) I’m sorry but this is not possible because the icon has no active state.
3.) Try this css code instead.
#top #s { padding: 11px 47px 11px 5px; height: 50px; }Best regards,
IsmaelThanks, Ismael!
With active I meant when the search box is popped up, not in a hover/active sense.
+++
The issue with different font types and colours in the footer is solved now. I am using special heading instead of one widget. Causing me more work but looks better.
+++
I am trying to get the header in mobile mode being slightly transparent (0.9). When I am adding it to the following snippet, the flyout gets transparent, too, which I don’t want.
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
position: fixed;
}
.html_header_top.html_header_sticky #top #main {
padding-top: 200px !important;
}
}+++
Still not solved: how do I get the field description text of the contact form to be regular instead of bold?
Also, I couldn’t find a way how to set the font of the field description (contact form) to regular. It’s bold and I don’t like it like that. I used:
/* Required field (Styling the asterisk ) */
.avia_ajax_form label .required {
font-family: ‘maven pro’; font-style: regular;
}But it doesn’t work.
+++
How can I separate the colour settings for links from those for buttons. I like how the submit button of the contact forms looks and behaves now, but applying this to text links doesn’t look good. I tried via quick css but without success.
+++
Thanks for your help!
Hi,
With active I meant when the search box is popped up, not in a hover/active sense.
That’s what I meant. You can’t detect if the search box is currently “popped up” or not.
I’m sorry but we don’t entertain multiple questions on a single thread. Please create new post for each inquiry. If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Best regards,
IsmaelOK. Then this was a misunderstanding on my side.
Here are two more issues related to the flyout function. I hope someone will take care of these. Thanks.1) In the flyout menu the submenu link aren’t indented anymore. How can I fix this?
2) After clicking a submenu link the flyout stays on the screen. It only disappears when the submenu link is directing to another page.
Hi VCS33,
Here is a thread for you to consider about closing the flyout
https://kriesi.at/support/topic/close-mobile-menu-by-clicking-on-active-navigation-item/Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.html_av-overlay-side-minimal #top .av-burger-overlay .sub-menu { text-indent: 20px; }If you need further assistance please let us know.
Best regards,
VictoriaThank you, Victoria!
For two submenu items the text is longer so there is a break and the next line isn’t indented. Please see picture : https://i.imgur.com/Qu7BENn.png
Any idea how this can be put nicely?Hi,
1.) Please replace the css with the following code.
.html_av-overlay-side-minimal #top .av-burger-overlay .sub-menu { text-indent: 0; padding-left: 20px; }2.) You can add the modifications from the previous thread.
// https://kriesi.at/support/topic/close-mobile-menu-by-clicking-on-active-navigation-item/
Best regards,
Ismael
- You must be logged in to reply to this topic.