Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 15, 2024 at 10:13 pm #1443758
    spokerstradingco

    HI, How do I make the small separator height smaller in my navigation menu? I have attached a screenshot of what I’m trying to do in private. I dont want the whole line removed but just make them not as tall.

    May 16, 2024 at 7:29 am #1443824
    Ismael

    Hey spokerstradingco,

    Thank you for the inquiry.

    You can add this css code to remove the default border and create another with a definite height. 

    .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text:before {
    content: '';
    width: 1px;
    height: 22px;
    background: #c4beb1;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
    border: 0;
}

.av_seperator_small_border .av-main-nav > li.menu-item-top-level-3 > a > .avia-menu-text:before, .av_seperator_small_border .av-main-nav > li.menu-item-top-level-1 > a > .avia-menu-text:before {
    display: none;
}

    Best regards,
    Ismael

    May 16, 2024 at 9:04 pm #1443946
    spokerstradingco

    Thank you for this. The code works!

    I did have one question. When I hover over Products or Contact it also triggers the separator to change hover colors – Like it is part of the meny element.

    May 18, 2024 at 8:36 pm #1444391
    Mike

    Hi,
    Unfortunately the line is a pseudo-element so it’s state is related to the parent element, if you want to remove the hover effect try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .av_header_transparency .main_menu ul:first-child > li > a:hover {
	opacity: 1 !important;
}

    Best regards,
    Mike

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