Hi Jordan,

No problem at all, main thing is that you noticed the issue and corrected it. :)

The CSS code works perfectly fine now.

Thank you so much for your assistance guys.

Kind regards,

Ben

Hi Jordan,

I will share login details if there is no other way, but at this point I am a bit reluctant to do so.

It happened before as well, that two or three css codes didn’t work that I have been given on this forum, and then someone shared a new idea, which did work at the end.

So, is there no other way to work this around? Perhaps someone else would have a different perspective to solve this?

Kind regards,

Ben

Hi Yigit,

This did work, great stuff, thank you!

Kind regards,

Ben

Hi Rikard,

Thanks a lot, this worked well.

Thanks for all your help guys, this topic can be closed now.

Kind regards,

Ben

Hi Andy,

The same applies here too, I went down on a different route now, so this trail can be closed as well.

Thanks,

Ben

Hi Elliott,

Thank you for the updated code and for the link to the website.

The styling of the button is fine now, but I still have two issues as I explained above which is still not resolved:

1. I would like to remove the transparency from the hovered button completely. Is there a way to do this?
2. When the button is hovered over, it still shifts the text elements upwards, how can I avoid this?

Look forward to your reply.

Best regards,

Ben

Hi Elliott,

Thank you for this code line.

The good news is that it works, that bad news is that it doesn’t work in a way I imagined.

It not only lifts up the buttons but the text above the buttons as well (in the same colour section) even though the text block and the button are two different elements.

I would also like the button to have a shadow effect when it’s unhovered, and as the button is hovered, I would like the button to lift up a bit and the shadow would also increase below it – just the way it does on the example website (www.thebigword.com).

Also, I would like to switch off the transparency of the button completely, so when it’s hovered over, I want it to stay in the same color as it is without the hovering.

See it on my website – allotropydigital.com

Is this possible?

Many thanks,
Ben

• This reply was modified 9 years ago by SynergyLanguageServices.

Hi Yigit,

Thank you for your reply – that’s awesome, works fine, thank you.

The only thing is that now the main caption is messed up in my slider on the top of the homepage, it is supposed to stay in the middle as the rest of the captions. The main caption slid away to the right hand side of the screen.

I currently use these CSS codes for class names I use on the homepage:

#top .enhanceyourglobalreach h1,h2,h3 {
background: rgba(0,0,0,0.3) !important;
width: auto !important;
margin: 0px auto !important;
display: inline-block !important;
padding: 20px !important;
position: relative;
left: 50%;
transform: translateX(-50%);
}

#top .wholeworld h1,h3 {
background: rgba(0,0,0,0.7) !important;
width: auto !important;
margin: 0px auto !important;
display: inline-block !important;
padding: 20px !important;
position: relative;
left: 50%;
transform: translateX(-50%);
}

Is there something this could have messed up in the main slider?

Many thanks,
Ben

Hi Ismael,

Thanks, it worked well.

Kind regards,

Ben

Hi Yigit,

Ok, I can see that you used the Avia Layout Builder. Although, the second row of buttons doesn’t appear on my screen (the one that starts with the “paragraph” drop-down menu…

Do you have any idea why I can only see the first row of buttons?

Many thanks,

Ben

Hi Yigit,

Let’s drop this topic now, I didn’t know it is that difficult.

I just genuinely don’t understand why this template was dveloped like this, why would social icons have no hover effect on mobile view when they have one on full screen… Makes no sense to me.

Anyway, thanks for your help.

Kind regards,

Ben

Hi Yigit,

Tahnk you for your reply.

Okay, this has fixed the underlining issue – removed the underline from the main mega menu items – so annoying that it was only those small asterixes “*”, sorry I didn’t realise I forgot to insert them… :S

I still have issues with the other two:

/*Adds back the hover color to the social media items when page is on compact screen*/
#mobile-advanced li:hover a { color: red !important; }

This doesn’t change anything at all, there is still no hover effect on social media icons when the mobile menu appears. I don’t understand the code, why should it say “color: red”? I just want the standard hover colors back on the social media icons when the website is running on mobile mode.

/*Changes the hover color of the socket menu items but doesn’t work at all*/
nav.sub_menu_socket a:hover {
background-color: red !important;
}

And this one just doesn’t work at all either.

Any idea guys?

The hover color on the socket menu items is not as important, but I really want the hover effect on the social media icons even on mobile mode just as on this very website I am on – just test it.

Many thanks,

Ben

• This reply was modified 9 years, 1 month ago by SynergyLanguageServices.

Hi Yigit,

Yes, in the meanwhile I did notice that your code also removed the underline from the socket menu items.

What I think as well that some of my CSS codes might conflict with this one – not sure.
Here is the link to my custom.css:
http://pastebin.com/gS6dg9HZ

Could you get back to me on how I change the hover color on the socket menu items?

Many thanks,
Ben

Hi Andy,

Thanks for your reply. I just tried to use these code lines in the quick CSS in General Styling but still don’t work.

I use a bunch of CSS lines in my custom CSS in my enfold child theme, but these ones simply don’t do anything with the website.

Also, I am not sure that you guys understood me well what I want to achieve. So I included images to my points, see on the below link:

http://digitatedesign.com/about-us/

Please advise if you can help me with these, at least with point nr 1.

Thanks,
Ben