Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 30, 2019 at 10:03 am #1123074
    apajo

    I’m referring to the line that is shown below a top menu item, like the thin red line in this demo:

    Homepage

    On our site, it is shown as a thick line above the item before scrolling. After scrolling (and shrinking of the menu), it is shown below the item, but much too close to the text.

    Before scrolling: https://i.imgur.com/CBVniTn.png
    After scrolling: https://i.imgur.com/8QSyNnz.png

    How can we make it more similar to the demo line (thinner, always below the items and fixed on the line between menu and body)?

    July 30, 2019 at 10:20 am #1123091
    Nikko

    Hey apajo,

    Can you give us a link to your site? so we can check further.

    Best regards,
    Nikko

    July 30, 2019 at 5:59 pm #1123203
    apajo

    Sure, please see private content.

    July 31, 2019 at 4:31 am #1123384
    Nikko

    Hi apajo,

    Thanks for giving us the link, can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top #avia-menu .avia-menu-fx {
    top: auto;
    bottom: 0;
}

    Best regards,
    Nikko

    August 3, 2019 at 7:39 am #1124325
    apajo

    Hi Nikko

    Thank you for your reply.
    I tried the code but can’t see any change.

    Not sure if it helps finding the source of the issue but here is the entire Quick CSS code I found on our site:

    .alternate_color strong, .main_color strong { color: black; }

    .sidebar li a {
    color: grey !important;
    font-family: ‘Ubuntu’;
    font-style: normal;
    font-size: small;
    }

    .main_menu ul:first-child>li>a {
    font-size: 16px;
    font-color: white;
    }
    .main_color tr:nth-child(even) {
    color: #121212;
    }
    #top ul:first-child > li > a {
    color: white;
    }
    #top ul:first-child > li > a:hover {
    color: white;
    }

    .avia-icon-list .iconlist_icon {
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 20px;
    margin: 0 30px 0 16px;
    }

    /* MENU BORDERS */
    #top .main_menu .menu ul li a {
    border-right-style: solid;
    border-right-color: #ffffff;
    border-right-width: 1px;
    border-left-style: solid;
    border-left-color: #ffffff;
    border-left-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ffffff;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-top-color: #ffffff;
    border-top-width: 1px;
    }

    /* Main Menu – SUB MENU OFF */
    #top .main_menu .menu ul li>a {
    color: #ffffff;
    font-weight:600;
    }
    /* Main Menu – SUB MENU HOVER */
    #top .main_menu .menu ul li>a:hover {
    color: #f16e50 !important;
    background-color: #ffffff;
    font-weight:600;
    }
    /* Main Menu – HIGHLIGHT BLOCK */
    #top .avia-menu-fx {
    display:block;
    position:absolute;
    top: 28px;
    border-style:solid;
    border-width:1px;
    color: #ffffff !important;
    }
    #top #avia-menu .avia-menu-fx {
    top: auto;
    bottom: 0;
    }

    #top fieldset > h3 {
    display: none;
    }

    .page-id-3542 #main img {
    border: 5px solid red !important;
    }

    .recentcomments a, .widget_recent_entries li a {
    font-style: normal !important;
    font-family: “Ubuntu” !important;
    }

    div#header_main {
    background-color: #f16e50;
    }

    .avia_mega_div * {
    font-size: 16px !important;
    }

    .home .av-masonry-date {
    display: none !important;
    }
    .avia-content-slider .slide-meta time {
    display: none;
    }

    August 5, 2019 at 8:52 am #1124659
    Nikko

    Hi apajo,

    I tried to check your site again and it works properly on my end, maybe it’s still fetching css from the browser cache on your end, try clearing your browser cache.
    This is the only code that’s not valid:

    font-color: white;

    It should just be color but it won’t affect other codes.

    Best regards,
    Nikko

    August 5, 2019 at 12:53 pm #1124705
    apajo

    Hi Nikko
    Tried again and it’s working.
    Thank you for your help!

    August 5, 2019 at 8:35 pm #1124871
    Victoria

    Hi apajo,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 6, 2019 at 2:47 pm #1125120
    apajo

    Just one follow-up question: how can the thickness of the line be increased?

    August 6, 2019 at 4:28 pm #1125157
    Nikko

    Hi apajo,

    Just replace the code I gave:

    #top #avia-menu .avia-menu-fx {
    top: auto;
    bottom: 0;
}

    with:

    #top #avia-menu .avia-menu-fx {
    top: auto;
    bottom: 0;
    border-width: 2px;
}

    Just adjust the border width value.

    Best regards,
    Nikko

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