Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1393958

    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!

    #1393961

    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

    #1394337

    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!!

    #1394464

    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

    #1394528

    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, 2 months ago by Chris.
    #1394630

    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

    #1394741

    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

    #1394914

    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

    #1394925

    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

    #1394991

    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

    #1395927

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

    #1395935

    Hi,

    Glad Mike could help!

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

    Best regards,
    Yigit

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.