Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 3, 2023 at 6:36 pm #1403438
    hi-fi

    Hi!

    There’s a line below the main menu, which follows the mouse, when navigating on the menu.
    – With an “Easy Slider” as the first layout element on the page, there’s a visually very nice spacing between the “Easy Slider” and that line. It’s a lovely design extra, I love it.
    – With a “Full Width Easy Sliders” there’s no spacing anymore, the line moves at the border of the image and becomes almost not noticeable.

    The spacing when I use a text-block in the first layout element instead is the same or similar like that which I get with an “Easy Slider”.
    I tried an empty “1/1” layout element above the “Full Width Easy Slider” as well as “Separator/Whitespace”, but then the distance created produces too much empty space for my liking.

    Can I achieve the same distance with the “Full Width Easy Slider” as Enfold shows with other elements? And what would I need to do, please?

    Thank you for listening!

    • This topic was modified 1 year, 7 months ago by hi-fi.
    April 4, 2023 at 5:06 am #1403474
    Ismael

    Hey hi-fi,

    Thank you for the inquiry.

    You can pull the column or the separator upwards by applying a css rule that adjusts the top margin using a negative value. This should get the line closer to where you want it to be. You may need to add a custom css class name to the separator or column.

    // https://kriesi.at/documentation/enfold/add-custom-css/#:~:text=Enable%20custom%20CSS%20class%20name%20support&text=Go%20to%20Advanced%20%3E%20Developer%20Settings,we%20normally%20do%20in%20CSS).

    Best regards,
    Ismael

    April 4, 2023 at 1:37 pm #1403515
    hi-fi

    Hi Ismael,

    thank you very much! It’s great news for me, that there will be a way.

    However, I will not be able to get there, I have no talent for coding. I installed the Enfold Child Theme to make different modification, for which I found the code on this board and nothing worked.
    I will not ask you to navigate me through all this as I feel I would ask too much from you. So I will have a friend look into it, but to get things rolling:
    May I kindly ask you to provide the code snippet we would need?

    • This reply was modified 1 year, 7 months ago by hi-fi.
    April 8, 2023 at 11:52 am #1403869
    Mike

    Hi,
    Thank you for your patience, as I understand your goal you would like to add some padding to the top of your pages with the Full Width slider, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #main > #full_slider_1 {
	padding-top: 50px;
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    feel free to adjust the number to suit.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 8, 2023 at 10:57 pm #1403919
    hi-fi

    Hi Mike,

    awesome, thank you very much! It works and I love it.

    While viewing my pages and thinking about the ‘moving line’ that follows the mouse on the menu sitting at the edge of the Full Width Slider, I had a different idea: Increasing the size of that line in px.

    – If I wanted to do this, please, what would be the CSS code for that?
    – And if I wanted to combine your code above with it, what would the code then look like?

    I hope. I’m asking not too much!

    Kind regards,
    Bernd

    • This reply was modified 1 year, 7 months ago by hi-fi.
    • This reply was modified 1 year, 7 months ago by hi-fi.
    April 9, 2023 at 2:32 pm #1403946
    Mike

    Hi,
    Glad to hear, the thickness of the line currently is 2px, to double it try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #avia-menu .avia-menu-fx {
    height: 4px;
}

    feel free to adjust to suit.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 9, 2023 at 2:42 pm #1403947
    hi-fi

    Hi Mike,

    super, thank you so much!

    This was one I had to see to learn, if it works, which it doesn’t with the padding I added before thanks to your help. Probably it would, if I go back to no padding, I’ll see.
    However and only on a side note: There’s a slight visual glitch with the line thicker than 2px, which happens when it moves above a menu entry that has submenues: Then the line splits into a two different thick-parts. But this is not an issue and I’m not asking for your support on this. :-)

    Happy Easter!

    • This reply was modified 1 year, 7 months ago by hi-fi.
    April 9, 2023 at 6:10 pm #1403964
    Mike

    Hi,
    Thanks for the feedback, try this css instead:

    #avia-menu .avia-menu-fx {
    height: 4px;
}
#avia-menu.av-main-nav  ul {
	margin-top: -3px;
}
#avia-menu.av-main-nav > li > ul {
    border-top-width: 4px;
}

    After applying the css, please clear your browser cache and check.
    Happy Easter to you too!

    Best regards,
    Mike

    April 9, 2023 at 10:26 pm #1403990
    hi-fi

    Dear Mike,

    thank you for adding this on top! This.is.what.I.needed. I removed the padding and changes the values to 3 / 2- / 3 and I’m now very happy with the appearance. Super!
    And the visual glitch is gone, too, of course.

    Best regards
    Bernd

    • This reply was modified 1 year, 7 months ago by hi-fi.
    April 9, 2023 at 10:54 pm #1403994
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Different spacing of sliders towards the menu bar.’ is closed to new replies.