-
Posts
-
Hi folks.
I have a menu on the header: the header is transparent as soon as you open the website, and then it becomes opaque after scrolling down.I would like to highlight one of the menu items with a rounded border around it: I’ve selected the “Button style (bordered”), but it is not simply adding a border around the menu item, as I was expecting: it is also changing the colors. And the colors do not change when switching from “transparent” to “opaque”. The result is terrible :-)
See the screenshot with the button in “transparent mode” and in “opaque mode”: https://imgur.com/a/AsDMGA2
What should I do? In the “advanced style” I could not find any style that allows me to customize it as I want…
The website is https://www.sentierigressoney.it. Currently, I’ve removed the style on that menu item.
THX
Bye,
A.-Hey Angelo,
We need to inspect the problem in order to give you accurate CSS. Could you give us access to the backend, so that we can turn it on temporarily please?
Best regards,
RikardHi A,
There were many errors in your custom CSS related to the way you add comments in CSS. I have corrected them. Following is the correct way of adding comments in CSS
/* Comment goes here */And you had following custom CSS in Quick CSS field which was overriding default styling
#top .av-menu-button > a .avia-menu-text { font-size: 16px !important; font-family: 'Lato' !important; background: #9cae30 !important; border-collapse: separate !important; border-width: 0px !important; border-color: white !important; border-radius: 5px !important; color: white !important; opacity: 1 !important; padding: 10px !important; box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5) !important; -webkit-transition: 0.3s !important; -moz-transition: 0.3s !important; -ms-transition: 0.3s !important; -o-transition: 0.3s !important; transition: 0.3s !important; }I changed it to following
#top .av-menu-button > a .avia-menu-text { font-size: 16px!important; font-family: 'Lato'!important; /* background: #9cae30!important; CAMBIO ANDREA */ border-collapse: separate!important; border-width: 0px!important; /* CAMBIO ANDREA 30/6/2022, prima c'era 1px */ border-color: white!important; border-radius: 5px!important; color: white!important; opacity:1!important; padding:10px!important; /* box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5)!important; */ -webkit-transition: 0.3s!important; -moz-transition: 0.3s!important; -ms-transition: 0.3s!important; -o-transition: 0.3s!important; transition: 0.3s!important; border: solid !important; }You can now change border color in Enfold theme options > Advanced Styling > Menu Item Button with Border :)
Best regards,
YigitHi @Yigit, thanks for your help!
What are the errors in my comments that you fixed?
Because I know that comments must be written between /* and */. Normally I am commenting out parts of the CSS “extending” the closure of the comment, therefore this is why you may have found some parts of the CSS that start with a /* before the comment, and then they have the */ only at the end of the style… it is on purpose, this way I have deactivated that part of the CSS.
Is this the type of error you are referring to?Said that: ok, now I can edit the “Menu Item Button With Border” style.
But:
1) in the “Menu Item Button With Border” I can only change font color and border color. I cannot change the background of the button (now it is using a green that is the same of my buttons), the background of the item (now it is BLACK, and it is different than the dark gray of my meny bar)….
2) how can I make it transparent when the homepage is first loaded (and the header is transparent)?My goal is quite simple from a styling standpoint: i just want to have a white border around one menu item (white color, like the existing menu text itself).
No color to fill the button: the background must change according to the background of the menu bar (which is transparent as soon as you open the page, and then changes to dark gray)Thanks again and bye!
A.-Hey A.,
// was used to comments instead of /* */. So I replaced all instances of // with /* */ :)
Could you please post a screenshot and show the changes you would like to make so we can make sure that we are on the page? After I made the changes there was only a white border around highlighted menu item and that sounds like what you wanted so I am a little confused :)
Regards,
YigitHi @Yigiyt.
Wow, I see, in fact I was also using // for comments… but CSS seemed to me to be working quite well! OK, I will stop using it.Second: no, I don’t see a simple border. I see a colored button!, that remains the same both in “transparent” and “opaque” mode!
I made sure to clean the cache, I connected in incognito mode, I connected from a PC where I never launched the website…. no changes, I always see the colored button.See below what I see (in the top part of the image): I’ve also added (in the bottom part) what I’d like to achieve :-)
Thanks for your help!
Bye,
A.-Hi A,
It seems like you have saved theme options and it overwrote the changes I made. I made them once again so please refresh your Theme Options page before saving it :)
Best regards,
YigitThanks Yigit, it seems like I was working on the website together with you :)
Issue solved, thanks so much!
You can close the ticket.
Bye!
A.-
- The topic ‘Menu with "Button style (bordered)" with transparent header:’ is closed to new replies.