-
Posts
-
Hi,
As you can see in the URL i placed in the private area, i added some css for the logo to overlap the menu row and look they way it looks right now:
The problem is that the z-index prevents the first 3 menu items from being mouse overed and clicked. The first menu item have a submenu that is not shown because the logo area overlaps it because of z-index.
I am also putting the login credentials there in case you need to login and check further.
How can i fix this issue?
Thank you so much in advance!
Hey mike.rav,
I don’t think you can get that working with only z-index unfortunately, it would be better if you put the text part of your logo into a widget for example: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area
Best regards,
Rikardcan you pleas look if this will work on all browsers:
put it in quick css:.logo, .logo a { -webkit-clip-path: polygon(0px 0px, 0px 100%, 35.00% 100.00%, 35% 50%, 100% 50%, 100% 0%); clip-path: polygon(0px 0px, 0px 100%, 35.00% 100.00%, 35% 50%, 100% 50%, 100% 0%); overflow: hidden!important } .header-scrolled .logo, .header-scrolled .logo a { -webkit-clip-path: polygon(0px 0px, 0px 80%, 35% 80%, 35% 50%, 85% 50.00%, 85% 0%); clip-path: polygon(0px 0px, 0px 80%, 35% 80%, 35% 50%, 85% 50.00%, 85% 0%); overflow: hidden!important }no – Safari won’t support this – hm let me think about that problem a while
i think we won’t be able to get around converting your logo to svg, and setting the link via svg. ( SVG Shapes )
if you got a svg file – please post the link to it.
Or tell me what font you have used in your logoHi,
I can confirm that the css works ok on the latest version of Chrome, Firefox and Edge.
It does not work on IE.
I did not test with Safari, as i do not have it installed.
I cannot provide svg fie for the logo at the moment. i ll be able to provide it on monday.
The logo’s font is Calibri.
Thank you so much!
Hi,
Thanks for the reply.
In the link you provided i do not see how the issue is fixed. The logo does not overlap the main menu in order to prevent the menu items behind it to be clicked and mouse overed.
The logo in your case is on the left side and the menu on the right side.
In my case the logo is in front of some menu items using z-index. I placed the previous css you provided (clip-path) and it works on most browsers.
Thank you
this was an existing site and i only changed logo etc. for your setting on one page.
i added some menu points and gave a submenu to home.The page should show you that it can be done with svg ( and i do not adjust the rest on that site – it is only a testpage – that menu and submenus are working with that logo constellation )
Ηi,
1. The logo in this case is one SVG file?
2. Which main main menu item has submenu that it is currently place within the logo area?
Thanks
Yes that was a svg file
PS : Guess the big C is Verdana –It was nice that we talked about it;
I would have described the solution to you now – but that it doesn’t look exactly like the one on your site I can save myself the trouble now.Good luck to you
Hi,
Thanks so much for your time and help.
If you can point me to the right direction, I will try to make it look exactly the same as in the current site. I mean you can let me know which parameters to play with.
Thanks again
Hi,
Thank you for the update.
The site above is not loading properly. Did you move the site somewhere else? Please provide the new URL so that we can check it again, and a screenshot will help as well.
Best regards,
IsmaelHi,
Thanks for the reply.
The new URL is placed in the private content area.
I added the css Guenni007 suggested (i will copy it below), and it works in all browsers except Safari and IE.
.logo, .logo a {
-webkit-clip-path: polygon(0px 0px, 0px 100%, 35.00% 100.00%, 35% 50%, 100% 50%, 100% 0%);
clip-path: polygon(0px 0px, 0px 100%, 35.00% 100.00%, 35% 50%, 100% 50%, 100% 0%);
overflow: hidden!important
}.header-scrolled .logo, .header-scrolled .logo a {
-webkit-clip-path: polygon(0px 0px, 0px 80%, 35% 80%, 35% 50%, 85% 50.00%, 85% 0%);
clip-path: polygon(0px 0px, 0px 80%, 35% 80%, 35% 50%, 85% 50.00%, 85% 0%);
overflow: hidden!important
}Hi,
The clip-path property is partially supported on most browsers, and it will not work on others (IE, Opera).
// https://caniuse.com/#feat=css-clip-path
To fix the issue, you might have to extract the text from the logo and add it as a widget as @Rikard suggested previously.
Another solution is to set a higher z-index for the menu container and remove its background so that it won’t cover the logo. We can then create a pseudo container, apply a background to it and place it behind the alternate menu container.
#top #header_main_alternate { background-color: transparent; z-index: 5; } .container.av-logo-container::after { width: 100%; height: 50px; background: #f7f7f7; bottom: 5px; display: block; content: ''; position: absolute; left: 0; z-index: 0; visibility: visible; } .header-scrolled .container.av-logo-container::after { bottom: 20px; }Best regards,
Ismael
- You must be logged in to reply to this topic.