Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 16, 2019 at 11:15 pm #1166607
    chanjelin

    Help would be appreciated in writing some custom CSS to create a customized “Tab Section”.
    The design of the “Tab Section” that I’d like, looks exactly like the “Fullwidth Sub Menu” on my site.

    I have attached a picture in the private content to show you what my “Tab Section” currently looks like, and I’ve put a “Fullwidth Sub Menu” next to it to show you what I’d like the “Tab Section” to look like. The “Fullwidth Sub Menu” only serves as a visual guide, and will be removed when this is done.
    Additionally I’ve included the page and login access.

    The main modifications involve reducing the Tab Section title area height, and formatting the tab item texts so that they remain on one line.
    I’d also like to add the borders and dividers between items.

    Thank you for your help,
    chanjelin

    December 18, 2019 at 11:38 am #1167223
    Ismael

    Hey chanjelin,

    Thank you for the inquiry.

    You can use the following css code to adjust the style of the tab titles.

    #top .av-section-tab-title {
	padding: 0 20px 0px 20px;
}

#top .av-inner-tab-title, .av-tab-section-icon, #top .av-tab-arrow-container, #top .av-tab-section-image {
	width: auto;
        margin-bottom: 0;
}

    Best regards,
    Ismael

    December 19, 2019 at 5:10 pm #1167832
    chanjelin

    Thank you so much Ismael!

    Do you think that it would be possible to add a border to the tab titles, and dividers in the title as well?

    December 19, 2019 at 8:59 pm #1167933
    Victoria

    Hi chanjelin,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .av-section-tab-title {
    border-right: 1px solid yellow;
}
#top a[href="#about-us"].av-section-tab-title {
  border: none;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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