Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 18, 2023 at 5:53 pm #1393958
    Chris

    Hi all,

    I have a transparent header on my homepage (www.doteditmedia.com), and I was able to remove the bottom border with this custom CSS:

    #top .av_header_with_border.av_header_transparency #header_main {
    border: none;
    }

    I’m now trying to remove the vertical white separator line on the right of the header, between the menu points and the social icons. I tried this code but it didn’t help:
    #top #header_meta li {
    border: none;
    }

    Any ideas?

    Thanks!

    January 18, 2023 at 6:32 pm #1393961
    Yigit

    Hey Chris,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
.avia-menu.av_menu_icon_beside {
  border: none;
}

    Best regards,
    Yigit

    January 19, 2023 at 3:45 pm #1394337
    Chris

    Worked like a charm, thanks!!
    Before we close this thread, I have another issue that I need help with…
    My dropdown menu under the menu point “Services” needs to be transparent (NOTE: but when you scroll down and the sticky header kicks in and the main menu changes to white, then of course the submenu needs to change to white as well. Basically, it needs to have the same behaviour as the main menu).
    I’ve read these two posts and implemented the suggestions there, but nothing has changed:
    Post 1 – https://kriesi.at/support/topic/enfold-theme-dropdown-menu-transparency/
    Post 2 – https://kriesi.at/support/topic/main-menu-drop-down-opacity/
    I put this code into my custom CSS and it didn’t work:
    #top .sub-menu {
    background: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
    }
    I also put this code into my custom CSS and it didn’t work:
    #top .sub-menu {
    background: transparent !important;
    box-shadow: none !important;
    }
    I also added this code to my style.css and it didn’t work:
    #top .sub-menu { background: transparent !important; box-shadow: none !important; }

    I have removed all of the above lines of code from the site.

    One idea: Could the code from higher up in this thread be conflicting with any of this other code?
    (That code is this:)
    #top .av_header_with_border.av_header_transparency #header_main {
    border: none;
    }

    Thanks for your help!!

    January 19, 2023 at 8:13 pm #1394464
    Mike

    Hi,
    As I understand your request, when your header is transparent you want the sub-menu item for “Services” to also be transparent,
    Please try this css:

    #top .av_header_transparency #menu-item-16705 .sub-menu,
#top .av_header_transparency #menu-item-16705 .sub-menu li,
#top .av_header_transparency #menu-item-16705 .sub-menu a {
background: transparent !important;
box-shadow: none !important;
color: #fff;
border: none;
}

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

    Best regards,
    Mike

    January 20, 2023 at 1:34 pm #1394528
    Chris

    Hi Mike,
    That worked super well, thanks!
    Could I ask, what would the two extra lines of code look like if I wanted to increase the font size of the submenu and to align the text to the top (instead of middle)? If that’s possible to do, of course.
    Thanks!
    Chris

    • This reply was modified 1 year, 6 months ago by Chris.
    January 21, 2023 at 1:21 pm #1394630
    Mike

    Hi,
    I imagine that you want the font-size to change for both before and after scroll so try this:

    #top #avia-menu .sub-menu a {
font-size: 14px;
font-weight: 600;
}

    and to align the text to the top is addressed by removing the top padding:

    #top #avia-menu .sub-menu a {
	padding-top: 0;
}

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

    Best regards,
    Mike

    January 23, 2023 at 9:19 am #1394741
    Chris

    Thanks Mike!
    The text size was increased and looks great.
    The padding removal didn’t work – is there code that changes the text alignment (ie. to the top instead of the middle)?
    Thanks!
    Chris

    January 24, 2023 at 1:10 pm #1394914
    Mike

    Hi,
    The sub-menu item is currently at the top of the element:
    Enfold_Support_172.jpeg
    perhaps you mean something else, can you please explain further?

    Best regards,
    Mike

    January 24, 2023 at 2:24 pm #1394925
    Chris

    Hi Mike,

    Ok, I see – I obviously didn’t notice the change.

    Ideally I would like to lift the text up further. But I don’t think there can be much more of a change unfortunately, because as far as I can see the only way to do that would be to adjust the size of the header (to make it narrower/thinner) and that would decrease the logo size on the far left, which we wouldn’t want to do.
    So I can’t see any way around it at present.

    Thanks for your help anyway!

    Chris

    January 24, 2023 at 7:46 pm #1394991
    Mike

    Hi,
    Try this css:

    .av-main-nav ul.sub-menu {
    top: 65%;
}

    65% will put the sub-menu item right under the main menu item, adjust to suit.

    Best regards,
    Mike

    January 30, 2023 at 4:17 pm #1395927
    Chris

    Awesome stuff! Looks good, thanks Mike!
    You can close this thread.

    January 30, 2023 at 5:50 pm #1395935
    Yigit

    Hi,

    Glad Mike could help!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Remove vertical white line on right side of transparent header’ is closed to new replies.