Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • May 4, 2022 at 10:48 am #1350443
    jensarnep

    I am trying to set the width for individual menu items. I have added css class for the individual menu items, but I am having problems with the code I need to add under quick css.

    I have tried this, but is isn’t working
    .kontakt {
    max-width: 150px;
    }

    Kontakt is the the name of the css class.

    I have also tried:

    .av_seperator_small_border .av-main-nav > li#kontakt > a > .avia-menu-text
    {max-width: 150px;}

    It didn’t work either.

    Can you help me?

    May 4, 2022 at 12:52 pm #1350464
    Nikko

    Hi Hans,

    You can use this selector instead to target it properly:

    #top #header .avia_mega_div .sub-menu .kontakt

    The max-width: 150px won’t have effect because that column is about 100px in width which is less than 150px, use width or min-width instead.
    Hope this helps.

    Best regards,
    Nikko

    May 4, 2022 at 1:44 pm #1350479
    jensarnep

    Thanks. It got me some of the way, but when I try to set the width in the sub menu “Program” it does not work. I can set the width of “aktuelt” but when I try to reduce the width of “kvartalsprogrammer” the box is getting longer.

    May 4, 2022 at 2:44 pm #1350492
    Rikard

    Hi,

    Thanks for the update. I’m not sure exactly what you are looking to achieve, could you try to explain your intentions a bit further, or post a screenshot highlighting them please?

    Best regards,
    Rikard

    May 4, 2022 at 2:57 pm #1350494
    jensarnep
    This reply has been marked as private.
    May 4, 2022 at 5:52 pm #1350508
    Rikard

    Hi,

    Thanks for that. Please try this in Quick CSS:

    #menu-item-399 .six.units {
    width: 350px;
}

    Best regards,
    Rikard

    May 4, 2022 at 6:19 pm #1350517
    jensarnep

    It does not change much. I have used the follwing code to keep the space between “aktuelt” and “kvartalsprogrammer” down.

    #top #header .avia_mega_div .sub-menu .aktuelt
    {width: 65px;}

    Adding the code you suggest or removing the code above will have the same result. Space is increased between “aktuelt” and “kvartalsprogrammer”. I am trying to avoid that.

    If I try to reduce the space for “kvartalsprogrammer” with the follwing code, it does not work:

    #top #header .avia_mega_div .sub-menu .programmer
    {width: 65px;}

    Reducing the space to the right of “kvartalsprogrammer” is what I am trying to achieve.

    May 4, 2022 at 7:15 pm #1350523
    Rikard

    Hi,

    Please try using the code I sent previously, then add this too in order to float the second menu item to the right:

    li#menu-item-163 {
  float: right; 
}

    Best regards,
    Rikard

    May 4, 2022 at 7:26 pm #1350524
    jensarnep

    I just added both codes but nothing changed.

    May 4, 2022 at 7:37 pm #1350525
    jensarnep

    I am have added these codes under general styling:

    /* Margin og padding i footer. Vigtigt!*/
    #footer {
    padding-top: 10px;
    margin: 0px;
    }

    #footer .widget {
    padding-top: 10px;
    margin: 0px;
    }

    /* Footer kontakt og “Det gode liv i Skibhus”*/
    #footer .widget {
    padding-top: 0px;
    line-height: 8px;
    font-size: 18px;
    }

    /* Footer menu */
    .footer_color a {
    font-size: 18px;
    line-height: 14px;
    }
    /* Fjerner margin over widget title i footer. Vigtigt!*/
    #footer .flex_column .widget .widgettitle {
    margin-top: 0;
    padding-top:0;
    }

    /* Font størrelse sidenavn */
    .main-title a {
    color: black !important;
    font-size: 28px !important;
    }

    /* Fjerner kanten under header */
    .main_color.container_wrap_first.container_wrap.fullsize {
    border: none;
    }

    /* Justerer afstand fra sidens indhold til henholdsvis hovedmenu og footer*/
    .content, .sidebar { padding-top: 5px; padding-bottom: 35px; }

    /*Fjerner den stiplede linje i mega menuen*/
    .html_header_top .header_color .main_menu ul:first-child >li > ul, .html_header_top #top .header_color .avia_mega_div > .sub-menu {
    border-top-color: transparent;
    }

    /*Fjerner de lodrette linjer i mega menuen*/
    #header .avia_mega_div .units {
    border-right-width: 0;
    }

    /*Fjerner footer-menu i socket*/
    .sub_menu_socket {
    display:none !important;
    }

    /*Fjerner kant på layer slider*/
    .avia-layerslider {
    box-shadow:none !important;
    }
    .avia-layerslider {
    border-top-width: 0 !important;
    }

    /*Padding i udermenuen*/
    .sub-menu li{
    padding:2px 4px!important;
    }

    .sub-menu li a{
    line-height:20px!important;
    }

    /*Bullets gøres hvide*/
    .avia_mega_div .avia-bullet {
    border-color: white;
    }

    /*Minimumshøjde for at undgå menuen bevæger sig*/
    #top #wrap_all #main .main_color.container_wrap_first {
    min-height: 55vh !important;
    }

    /*Skrifttypens farve i undermenu*/
    #top #header .mega_menu_title a {
    color: #ffffff !important;
    }

    #top #header .avia_mega_div .sub-menu .kontakt
    {width: 20px;}

    #top #header .avia_mega_div .sub-menu .foreningen-skibhuscentret
    {width: 50px;}

    #top #header .avia_mega_div .sub-menu .om-skibhuscentret
    {width: 250px;}

    #top #header .avia_mega_div .sub-menu .aktuelt
    {width: 55px;}

    #menu-item-399 .six.units {
    width: 350px;
    }

    li#menu-item-163 {
    float: right;
    }

    May 5, 2022 at 4:30 am #1350544
    Nikko

    Hi jensarnep,

    Can you try adding this to your CSS code and see if it helps:

    #top #avia-menu .avia_mega_div.avia_mega2 {
    width: auto;
}

#top #header .avia_mega_div .sub-menu .programmer {
    width: 180px;
}

    Best regards,
    Nikko

    May 5, 2022 at 8:58 am #1350561
    jensarnep

    Hi Nikko
    It appears that the code also changes the width for submenu “faciliteter” which was not my intention.
    Also I cannot adjust the space between “aktuelt” and “kvartalsprogrammer”.

    May 5, 2022 at 5:46 pm #1350659
    jensarnep

    My intention is to adjust the width of the submenu “program” without effecting the other submenus. I succesfully adjusted a submenu with this code but for some reason it does not work with the submenu “program”:

    #top #header .avia_mega_div .sub-menu .aktuelt
    {width:95px;
    float: left;
    }

    • This reply was modified 2 years, 7 months ago by jensarnep.
    May 6, 2022 at 1:55 am #1350705
    Nikko

    Hi jensarnep,

    Please remove the last code I gave and use this one instead:

    #top #avia-menu #menu-item-399 .avia_mega_div.avia_mega2 {
    width: auto;
}

#top #header .avia_mega_div .sub-menu .programmer {
    width: 180px;
}

    This code is specific to the Program Menu.

    Best regards,
    Nikko

    May 6, 2022 at 8:47 am #1350759
    jensarnep

    Hi Nikko. It’s working now. Is there a command that will do the same for the submenu “Skibhuscentret”, set the width to auto?

    • This reply was modified 2 years, 7 months ago by jensarnep.
    May 7, 2022 at 11:37 pm #1350909
    Mike

    Hi,
    Thank you for your patience, please try this css:

    #top #avia-menu #menu-item-35 .avia_mega_div.avia_mega3 {
    width: auto;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 8, 2022 at 9:19 am #1350930
    jensarnep

    Prevent line break

    This is what it looks like when I use the code. I would like to prevent line break. What is the best way to do that?

    May 8, 2022 at 8:45 pm #1350966
    Mike

    Hi,
    Try this css instead:

    #top #avia-menu #menu-item-35 .avia_mega_div.avia_mega3 {
    width: auto;
    white-space: nowrap;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 8, 2022 at 9:26 pm #1350969
    jensarnep

    Space

    Much better. If only I could adjust the space between “Kontakt” and “Foreningen SKibhuscentret”.
    I am sorry for causing so much trouble.

    May 9, 2022 at 12:26 am #1350977
    Mike

    Hi,
    Try adding this css:

    #top #avia-menu #menu-item-38 a {
	padding-left: 30px;
}

    and adjust the padding to suit, then clear your browser cache and check.

    Best regards,
    Mike

    May 9, 2022 at 8:50 am #1351002
    jensarnep

    Perfect :-) If I want to do the same with the menu “Faciliteter”, auto adjust width and no line break, what do I have to do?

    May 9, 2022 at 12:33 pm #1351044
    Mike

    Hi,
    Try:

    #top #avia-menu #menu-item-56 .avia_mega_div.avia_mega2 {
    width: auto;
    white-space: nowrap;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 9, 2022 at 1:49 pm #1351050
    jensarnep

    Thanks. It worked. Last and final question. Is there a way to reduce the space between the rows in this mega menu? I have tried the code in the folowing post, but it does not work:

    Space Between Mega Menu Rows

    LAST

    May 10, 2022 at 12:27 am #1351085
    Mike

    Hi,
    Try this css:

    #menu-item-122 .sub-menu{
padding-bottom:0px!important;
}

#menu-item-122 .sub-menu.avia_mega_hr{
padding-top:0px!important;
}

    Best regards,
    Mike

    May 10, 2022 at 6:47 am #1351104
    jensarnep

    It’s working. Thank you so much. You have been a tremendous help. I have no further questions.

    May 10, 2022 at 9:52 am #1351129
    Nikko

    Hi jensarnep,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Style individual menu’ is closed to new replies.