Text shadow only for main menu, not for submenu

Hi,

I wanted to have main menu text with shadow and put the code below in customize > additional css section. It worked.

 .menu-item {  
    text-shadow: 5px 3px 3px black; 
 }

However, it also affected the submenu, which now has text with shadow. I do not want that.

Could you give me a code to have text shadow only for main menu, but not for submenu?

Thank you,
Regards,

Hi,

Thank you for contacting us and asking about CSS to customize our Sydney theme. I am happy to help out.

Here is a little correction you can try – replace that code with this:

    ul:not(.sub-menu) .menu-item {  
       text-shadow: 5px 3px 3px black; 
    }

Let me know how it works for you.

Regards,
Kharis
aThemes Support

Hi Kharis,

I put the code you gave me, but that did not make any change.
Unfortunately, both of main menu and sub menu are still with shadow.
I wonder why.

I am not sure if you need to take a look at my site, but in case you do, here is the link:
http://suzuki-akiko.com/カウンセリングとは/

Thank you,

Hello there,

Thank you for getting back.

I checked your website’s main menu and I didn’t find the sub menus. Can you point me somewhere?

Regards,
Kharis
aThemes Support

Hi,

By the sub menus, I meant what you will find when you click the hamburger menu.

You are right that the main menu did not have the sub menus.
I have just added the submenus to the main menu, so you can find the sub menus by clicking both main menu and hamburger menu now. (For the main menu, only the third item from the left has the sub menus).

I hope the above clarifies the confusion.
Regards,

Hi,

Thank you for clarifying.

Please try this code:

    @media only screen and (min-width: 1025px) {
      .menu-item {  
       text-shadow: 5px 3px 3px black; 
      }
    }

Regards,
Kharis
aThemes Support

Hi,

Thank you, it does what I originally aimed at.
The hamburger submenus look perfect without shadow!

Could you further help and give me codes to work on the submenus of the main menu?

  1. Erase shadow
  2. edit the text font and size
  3. make the background opaque

For 1, I tried the code below but it did not work.

    #mainnav ul ul.sub-menu li a {
      text-shadow: unset;
    }

(Originally, the main menu did not have the submenus, but it is actually nicer to have them, which now look awkward.)

Thank you again,

Hello there,

Try replacing the last code I’ve suggested with this one:

    @media only screen and (min-width: 1025px) {

      #mainnav ul.menu > li.menu-item {
        text-shadow: 5px 3px 3px black; 
      }  

      #mainnav ul.sub-menu li a {
        font-size: 16px; 
        background-color: rgba(38, 50, 70, 0.3);
      }
      
    }

Regards,
Kharis
aThemes Support

Hello,

Thank you for getting back!
Yes, the code worked well!

I added the code below to change the font family, but it did not work. I should think that there is limit on what I can do with codes. I guess that changing the fond family of the submenus is something that codes cannot handle. Am I correct?

font-family: Noto Serif JP;

Regards,

Your preferred font should be included to your website before calling the font name via CSS code. To do so, you can use this plugin:

Regards,
Kharis
aThemes Support

Hi,

Thank you for getting back with the suggestion.

Actually, I already use the plugin called Easy Google Fonts.
Among css codes I have already applied, there is one in effect as follows:

    #slideshow .maintitle,
    #slideshow .subtitle,
    #slideshow .button-slider {
        font-family: Noto Serif JP;
    }

So I expected the code below to work well for the submenus of the main menu, but it did not.

   font-family: Noto Serif JP;

Any thought?

Regards,

Hi,

Thank you for getting back.

Try this code:

    .mainnav .sub-menu li a {
      font-family: Noto Serif JP;
    }

Regards,
Kharis
aThemes Support

Hi,

Thank you for another code.

Unfortunately, it did not work.

Actually, I think that there may be something that I could do by exploring Easy Google Fonts by myself.

If I could not figure out, I will then post a question as a separate topic.

Thank you,

1 Like

Thank you Kharisblank.
You code Helps me alot in my project of star projector.
Regards:
Nasir Sangi.

Hi Nasir,

Glad to hear that this threads helped you. Thank you for letting us know. I really appreciate it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Hi Kharis,

Let me continue with thread.
I still do not figure out why the code you gave me did not work.

.mainnav .sub-menu li a {
  font-family: Noto Serif JP;
}

Would it be possible to have another code?
FYI, the URL of my site is as follows.
Please delete the space after period(.) and before “com”.
http://suzuki-akiko. com

Regards,