Grigoriy Kotkovsky
asked on
Need to add a hyperlink to a logo
Hello!
I've put a logo on my site's homepage and the logo was clickable. And then I adjusted its position through custom.css file, but now the logo is NOT clickable (plain image). How to make it clickable again?
Here's a homepage of my site:
My site's URL
I've put a logo on my site's homepage and the logo was clickable. And then I adjusted its position through custom.css file, but now the logo is NOT clickable (plain image). How to make it clickable again?
Here's a homepage of my site:
My site's URL
The problem you have is that the DIV that contains your phone number is floating over the top of the logo, effectively 'blocking' the link. This is because of the way you've used the floats. You have a couple of options to sort it out. You can add a z-index to the DIV containing the logo which will bring it to the top of the stack, or you can apply an overflow rule to the floated divs - this will give the floats a width and stop them overlapping:
Option 1:
#toolbar .float-left .module:first-of-type { z-index: 1; }
Option 2:
#toolbar .float-left .module { overflow: hidden; }
Option 1:
#toolbar .float-left .module:first-of-type { z-index: 1; }
Option 2:
#toolbar .float-left .module { overflow: hidden; }
Hi,
What I recommend you is to have a line (top nav bar) before the menu (for phone, language selector)
Then under it the main menu logo , menu items
Something like this example https://uxwing.com/menudemo/webslide/mobile-drawer-style/layout-03-ecommerce/#
Menu are complexe and not easy to code I recommend you this menu script that will save you time
https://codecanyon.net/item/web-slide-bootstrap-4-mega-menu-responsive/21299306
What I recommend you is to have a line (top nav bar) before the menu (for phone, language selector)
Then under it the main menu logo , menu items
Something like this example https://uxwing.com/menudemo/webslide/mobile-drawer-style/layout-03-ecommerce/#
Menu are complexe and not easy to code I recommend you this menu script that will save you time
https://codecanyon.net/item/web-slide-bootstrap-4-mega-menu-responsive/21299306
ASKER
Chris Stanyon,
So what exactly should I do? If I just add those lines to custom.css, that's doesn't help...
So what exactly should I do? If I just add those lines to custom.css, that's doesn't help...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Chris Stanyon,
I'm assuming that your lines of code weren't supposed to be just added, but I didn't know how to incorporate them into an existing code... Sorry.
I'm assuming that your lines of code weren't supposed to be just added, but I didn't know how to incorporate them into an existing code... Sorry.
ASKER
Chris was the only one out of three participants who actually provided a solution to a problem. I hope it would've solved the issue, though I can't be sure without actually seeing the end result. But unfortunately, probably it needed some extra explanation, since I couldn't edit the existing code myself.
Hey Grigoriy,
All you needed to do was add one of the 2 options I provided to your CSS file. I can't see how your CSS files are setup so I'm not sure which one, but whichever one you changed to get it working is where you should have added it.
All you needed to do was add one of the 2 options I provided to your CSS file. I can't see how your CSS files are setup so I'm not sure which one, but whichever one you changed to get it working is where you should have added it.
ASKER
Chris Stanyon,
Nope, unfortunately it didn't work. I added to my custom.css file those lines (first the first one and then the other one instead). Didn't change a thing. Frankly, the other guy who proposed the working solution kinda confused me at first, since he'd written the same code I had already, BUT he also had added an extra parameter (position: static;) which made the whole difference. So I figured it out myself after awhile. In your case I couldn't...
Nope, unfortunately it didn't work. I added to my custom.css file those lines (first the first one and then the other one instead). Didn't change a thing. Frankly, the other guy who proposed the working solution kinda confused me at first, since he'd written the same code I had already, BUT he also had added an extra parameter (position: static;) which made the whole difference. So I figured it out myself after awhile. In your case I couldn't...
<A HREF="target-url"><IMG SRC="source-file" BORDER="0"></A>