Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 9, 2021 at 12:02 pm #1315827
    TakiwaSoulArt

    Hej,

    I have a few questions about the main menu:

    1. how can I omit the dash under an active menu item?
    2. how can I reduce the upper and lower distance from the font to the edge of the background?
    3. how can I round only the outer corners of the whole background of all menu items and not the corners of the background of each individual menu item?

    Thank you very much and best regards,
    Sabine

    August 10, 2021 at 8:23 am #1315983
    Ismael

    Hey Sabine,

    Thank you for the inquiry.

    1.) You can set the Enfold > Header > Header Layout > Header Style to the second option (Minimal). This should disable the active menu indicator.

    2.) Add the following css code to move the menu text downwards.

    #top #header .av-main-nav > li > a .avia-menu-text {
	top: 20px;
	position: relative;
}

    3.) You can use nth-child selectors to target the first and last menu items.

    // https://css-tricks.com/almanac/selectors/n/nth-child/

    Example:

    .avia-menu li:first-child {
	border-top-left-radius: 20px;
	overflow: hidden;
}

    This should adjust the top left border radius of the first menu item,

    Best regards,
    Ismael

    August 10, 2021 at 10:13 am #1316015
    TakiwaSoulArt

    Hi Ismael,

    thank you for answering. Sorry, I think I found the wrong words.

    to 2. I would like to make the height of the background smaller and centre the text in the menu.
    to 3. the code doesn’t work as I wanted it. When I enter the code for the left corners it works, when I enter the code for the right corners it rounds the corners of the first menu item and not, the corners of the last, I only need round corners on the left of the first menu item and on the right of the last menu item. So the background as a whole should have slightly rounded corners. I hope I could explain it better now.

    Thank you for helping again and greetings,

    Sabine

    August 12, 2021 at 8:11 am #1316393
    Ismael

    Hi,

    Thank you for the update.

    Would you mind providing a screenshot of the layout that you are after? Please use image hosting like imgur or dropbox for the screenshot.

    Best regards,
    Ismael

    August 12, 2021 at 10:11 am #1316403
    TakiwaSoulArt

    Hi Ismael,

    the screenshots are in the dropbox, link in the private content. I hope you can understand what I mean. Thank you.

    Best regards, Sabine

    August 13, 2021 at 8:09 am #1316555
    Ismael

    Hi,

    Thank you for the screenshot.

    You can use this css code to decrease the height of the main menu container.

    #top #header_main > .container .main_menu .av-main-nav > li > a {
	height: 60px;
	line-height: 60px;
}

    And add this one to apply a background and border radius to the menu container.

    #top #header_main > .container .main_menu .av-main-nav-wrap {
	background-color: #959d84;
	border-radius: 8px;
}

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    August 13, 2021 at 11:00 am #1316595
    TakiwaSoulArt

    Hi Ismael,
    thanks for the codes. It works in part.

    1. the menu should still be vertically centred in the header, please.

    2. the code for the radius only works in hover state. I would need the radius also in non-hover state.

    Many thanks in advance and best regards

    Sabine

    August 16, 2021 at 4:21 am #1316852
    Ismael

    Hi,

    Thank you for the update.

    We did not specify any hover state in the css code above. Are you sure that you added the css correctly? Please post the login details in the private field so that we could test it.

    Best regards,
    Ismael

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