Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • September 22, 2015 at 4:55 pm #507217
    SynergyLanguageServices

    Dear Team,

    I have three styling queries, that I hope you can help me with:

    1. I am developing a website under a test domain and would like to change the underline under the mega menu items, so under “services” (this is the mega menu) I want to remove the hover underline effect from “translation”, “transcription” etc, just as with the other “normal” menu items.

    2. I would also like to change the hover color and remove the hover underline from the footer menu items, so from “sitemap”, “terms and conditions” etc and add a different hover color, the same one as in the main menu.

    3. When I put this website to a compact mode, when the mobile menu appears on the screen, the hover color of the social media icons will disappear, I want them to be the same as when the site is on full screen.

    Could you help me with these ones please?

    Many thanks,

    Ben

    September 22, 2015 at 5:22 pm #507243
    Elliott

    Hey SynergyLanguageServices!

    1. Add this to your custom CSS.

    .mega_menu_title, .mega_menu_title:hover, .mega_menu_title a:hover, .mega_menu_title a { text-decoration: none !important; }

    2. Add this.

    #socket a:hover { text-decoration: none !important; background: red !important; }

    3. Not sure I understand. If your just wanting to change their hover color then you can do this.

    #mobile-advanced li:hover a { color: red !important; }

    Cheers!
    Elliott

    September 23, 2015 at 1:39 pm #507734
    SynergyLanguageServices

    Hi Elliott,

    Thank you for your reply.

    I have added these to my style.css in my child theme but none of them is working.

    Could you please revise these codes or give me alternative solutions?

    Also, with regard to the third point, when you put your browser from full-size to compact size, small enough for the mobile menu / responsive menu icon to appear on the screen the social media icons (facebook, twitter, google+ etc) don’t have a hover color anymore, so dark blue, light blue, red etc. Just hover over those icons when the page in on mobile view and you will see that the hover colors disappear. And this is what I want to add to the mobile page view as well, to have the same hover effect as on the full-size page.

    Look forward to your reply.

    Thanks,
    Ben

    September 24, 2015 at 2:05 pm #508447
    Andy

    Hey!

    did you try to put the code into Quick CSS field? clear browser cache and hard refresh a few times. Does no custom CSS code work at all for you?

    Regards,
    Andy

    September 25, 2015 at 10:56 am #508900
    SynergyLanguageServices

    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

    September 25, 2015 at 1:03 pm #508967
    Yigit

    Hi!

    Please add following code to Quick CSS 

    .mega_menu_title a,nav.sub_menu_socket a {
    text-decoration: none!important;
}
nav.sub_menu_socket a { 
padding: 5px; 
}

    Best regards,
    Yigit

    September 25, 2015 at 4:23 pm #509134
    SynergyLanguageServices

    Hi Yigit,

    Many thanks, this works in the Quick CSS but not in my Custom.CSS, any idea why?

    I would prefer to store all CSS codes in my custom CSS as it is easier to keep track of it that way.

    It did remove the underline effect from the socket menu items too – just checked.

    Any idea how I can add a custom hover color to the socket menu items?

    Thanks,

    Ben

    September 25, 2015 at 4:59 pm #509152
    Yigit

    Hi Ben!

    Code should work in Custom.css file as well. Can you please post the content of your custom.css file into – http://pastebin.com/ and then post us a link so we can check it?
    Also, should i posted should have removed underline from socket menu as well

    Best regards,
    Yigit

    September 25, 2015 at 5:23 pm #509185
    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

    September 27, 2015 at 11:06 am #509655
    Andy

    Hey!

    control hover color of your socket menu with this code:

    nav.sub_menu_socket a:hover {
background-color: red !important;
}

    Best regards,
    Andy

    September 28, 2015 at 6:20 pm #510342
    SynergyLanguageServices

    Hi Andy,

    Thank you, but unfortunately this doesn’t work either. I tried in my style.css as well as in the Quick CSS in Enfold general styling tab.

    I am using quite a few CSS codes now in my style.css, could it be the case that I am confusing the system by causing conflicts between these code lines?

    I have posted my current style.css two posts ago, could you please look into it?

    Many thanks,
    Ben

    September 29, 2015 at 10:49 am #510663
    Yigit

    Hi Ben!

    You have following comments near bottom 

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

    Please change them to 

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

    Regards,
    Yigit

    September 30, 2015 at 3:25 pm #511574
    SynergyLanguageServices

    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

    October 1, 2015 at 1:01 pm #512120
    Andy

    Hi!

    try this for you social icons: 

    @media only screen and (max-device-width: 736px) {
ul.noLightbox.social_bookmarks.icon_count_4 a:hover {
background-color: initial !important;
}}

    Cheers!
    Andy

    October 1, 2015 at 5:27 pm #512292
    SynergyLanguageServices

    Hi Andy,

    Sorry guys, but this doesn’t work either. (Tested both in Style.CSS as well as in Quick CSS on General Styling tab)

    Any other idea?

    Thanks,
    Ben

    October 7, 2015 at 2:53 pm #515263
    Yigit

    Hey!

    Sorry for the late reply!
    Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Best regards,
    Yigit

    October 15, 2015 at 12:58 pm #519246
    SynergyLanguageServices

    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

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Underlined menu items in mega menu’ is closed to new replies.