Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 11, 2022 at 10:46 am #1347940
    kazeko

    Hello.
    I have a trouble with custom css. I added class name to Custom CSS Class field of submenu and quick CSS, but it doesn’t work at all.

    I set submenu which appears only mobile. When I didn’t set custom css class, it works perfectly. But once I add custom css class, it appears on desktop.

    Could you please check it?

    April 11, 2022 at 3:24 pm #1347963
    Rikard

    Hi Ayumi,

    Which class are you adding, and what is not working? Please try to explain a bit further what you are looking to achieve.

    Best regards,
    Rikard

    April 12, 2022 at 12:09 pm #1348090
    kazeko

    Hi Rikard,
    I set submenu on the top page and I want to make it appears only mobile. Therefore, I add below to Quick CSS.

    /* Remove submenu on desktop */
    @media only screen and (min-width: 1024px) {
    #top .av-submenu-container { display: none !important; }
    }

    This code works perfectly.

    But, I would like to use different submenu another page, it appears both desktop and mobile. So, I added custom CSS class “topsubmenu” to submenu on top page and change css as below;

    /* Remove submenu on desktop */
    @media only screen and (min-width: 1024px) {
    #top .topsubmenu .av-submenu-container { display: none !important; }
    }

    After that, the submenu appears both desktop and mobile. Now I set custom CSS class to submenu on the top page and Quick CSS.

    April 12, 2022 at 12:17 pm #1348093
    Guenni007

    the custom class – if you set it directly to the alb element (submenu) itself goes to the submenu container.
    so it is the same place – therefore it has to be placed without space in the rule – and because it is after the av-submenu-container class :

    @media only screen and (min-width: 1024px) {
	#top .av-submenu-container.topsubmenu { display: none !important; }
}
    April 12, 2022 at 12:42 pm #1348096
    kazeko

    Hi Guenni,

    Thank you for your help. The code works perfectly.
    I mistook the order of the class, didn’t I? Also I needed to delete space before the custom class.
    Thank you a lot.

    April 12, 2022 at 2:44 pm #1348112
    Rikard

    Hi,

    Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    April 13, 2022 at 5:12 am #1348173
    kazeko

    Rikard,
    My problem has been solved. Could you please close the topic?
    Best regards,
    Ayumi

    April 13, 2022 at 5:40 am #1348181
    Guenni007

    yes – different classes on the same element are noted without space. .av-submenu-container.topsubmenu
    if you have .av-submenu-container .topsubmenu the av-submenu-container has a child with class: topsubmenu. What is not the fact.
    The order is then also important, with parent – child relationships anyway – and here at the same element in particular.

    April 13, 2022 at 6:50 am #1348189
    kazeko

    @guenni007 Thank you for teaching me. I’m appreciated!

    April 13, 2022 at 12:04 pm #1348214
    Rikard

    Hi kazeko,

    Thanks for the update, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Custom CSS doesn't work’ is closed to new replies.