Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #1350443

    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?

    #1350464

    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

    #1350479

    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.

    #1350492

    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

    #1350494
    This reply has been marked as private.
    #1350508

    Hi,

    Thanks for that. Please try this in Quick CSS:

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

    Best regards,
    Rikard

    #1350517

    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.

    #1350523

    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

    #1350524

    I just added both codes but nothing changed.

    #1350525

    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;
    }

    #1350544

    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

    #1350561

    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”.

    #1350659

    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 1 year, 11 months ago by jensarnep.
    #1350705

    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

    #1350759

    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 1 year, 11 months ago by jensarnep.
    #1350909

    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

    #1350930

    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?

    #1350966

    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

    #1350969

    Space

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

    #1350977

    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

    #1351002

    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?

    #1351044

    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

    #1351050

    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:

    LAST

    #1351085

    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

    #1351104

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

    #1351129

    Hi jensarnep,

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

    Best regards,
    Nikko

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