Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #271234
    Dirk Fritsche
    Participant

    Hey Team,
    Happy new year to ya all.

    Just some short questions about CSS Coding for further Menu Customization. See my attached image and the numbers 1) to 3).

    Menu Customisation

    1.1) How can I change the Background to another color.
    1.2) How can I change the background color to 50% opacity.
    Remark: I only want to make these changes to the dropdown-menu, not the main-menu itself.

    2) How can I change the Color and size of the Border around the Dropdown-box
    2.2) How can i change the box width -> Noch Fragen

    3) How can I apply a hover effect regarding the text color (e.g. if i hover over the menu-item “Grafikdesign” the text shall be red)

    4) How can I reduce the distance between the Dropdown-Menu and the Main-Menu.

    Thanks for helping out.

    BR Dirk

    #271279
    Skandha
    Keymaster

    @five-birds: Hello Dirk,
    Can you please post in your site URL so that I can look into the issue?

    Kind Regards,
    Skandha

    #271284
    Dirk Fritsche
    Participant

    Hi Skandha,
    the page URL is http://www.5bp.de

    BR Dirk

    #271285
    Dirk Fritsche
    Participant

    It seems, that my image i prepared was not uploaded properly:

    Menu Issues

    #271286
    Dirk Fritsche
    Participant

    Five-Birds Photography - 5bp-Galerie: Temorary &emdash;

    #271397
    Skandha
    Keymaster

    @five-birds: Hello Dirk,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    /* To change the opacity of background color of the submenu and change border size and color */
    .navigation-classic .main-navigation ul ul {
    	background-color: rgba(0,0,0,0.5);
    	border: 1px solid #f23456;
    }
    
    /* To change text color on hover */
    #primary-menu li a:hover {
        color: #bc2b25;
    }
    
    /* To reduce distance between main menu and sub menu */
    .navigation-classic .main-navigation a {
        padding-bottom: 0px;
    }

    Let me know if this solves the issues.
    Kind Regards,
    Skandha

    #271670
    Dirk Fritsche
    Participant

    Hi Skandha,
    As alway quick and proper support. Thank you very much. This was excactly what i was looking for (i couldn´t find the correct div handles).

    One last thing:

    If you look in the dropdown menu with “Photo” the box underneath ich very wide. Is there a chance to reduce the width a bit ?

    BR Dirk

    #271701
    Skandha
    Keymaster

    @five-birds: Hello Dirk,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .navigation-classic .main-navigation ul ul a {
        width: 150px;
    }

    You can change the width according to your choice.
    Let me know if this works out!
    Kind Regards,
    Skandha

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.