Spa Demo - divider line removal

[markcousins1]

Hi,

I’ve just bought your Xtheme and am figuring my way around.

I’m using the Spa demo for a template - I only want a simple looking site right now - and I’m wondering how I can remove the divider lines top and bottom of the menu please?

Many thanks
Mark

[ruenel]

Hello Mark,

Thanks for writing in! The Spa demo is using Icon stack. The borders you have mentioned were hard coded in the icon stack style.css file. Do you want to display it like this?

Regretfully there is no option in the theme that will remove this border. You can only do that by adding a custom a custom css in X > Theme Options > Custom CSS.

The border were added in the icon style.css file. A bottom border were added to the logobar and the navbar using this code:

.x-logobar {
    position: relative;
    overflow: visible;
    border-bottom: 1px solid #dfdfdf;
    border-bottom: 1px solid rgba(0,0,0,0.075);
    text-align: center;
    background-color: #fff;
    z-index: 1030;
}

.x-navbar {
    border-bottom: 1px solid rgba(0,0,0,0.075);
    background-color: #fff;
}

You need to override the border settings of the logobar and the navbar using this css selectors:

.x-logobar,
.x-navbar {
    /* border settings */
}

Feel free to set the border color to white or complete remove the border style.

• https://www.w3schools.com/cssref/pr_border-color.asp
• https://www.w3schools.com/cssref/pr_border-style.asp

Hope this helps.

[markcousins1]

Hi Ruenel,

Thank you for this - the only thing is that I can’t find Custom CSS in the Options? I can find Additional CSS but I’ve looked everywhere?

Thanks
Mark

[friech]

Hi Mark,

Theme Options > CSS is on the left-most side panel.

Hope it helps,
Cheers!