Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

I have a website design that I’m trying to build in X theme.

I know what I want to do but writing the code has proved difficult. I’ve used the inspect element function in chrome and got the border working but I can’t get it to work in the customiser.

I’ve attached a image of what I’m trying to achieve below.

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications! Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-logobar {
    border-bottom: solid 1px #e5e5e5;
}

.x-navbar .desktop .x-nav > li:after{
    content: "|";
    display: inline-block;
    position: absolute;
    top: 30%;
}

.x-navbar .desktop .x-nav > li:first-child:after{
    display: none;
}

Hope this helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Thanks for the Code Rue,

I’ve adapted it slightly to show a border rather than a |

The logo bar won’t show the border even with !important on. This is a new site so should be straight forward I would think.

I’ve got the layout as stacked if that’s any help.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-logobar {
    border-bottom: 1px solid #f2f2f2;
}
.x-navbar .desktop .x-nav {
    margin-top: 10px;
}

Hope it helps

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Joao]

Hi There.

I am not really sure what you are referring to:

Please add the following codes :

.widget_categories ul, .widget_product_categories ul, .widget_nav_menu ul, .widget_pages ul {

     border-bottom:0px;
}

.x-colophon.top .x-column {
    border-right: 0px;
}

If you were referring to something different please provide a screenshot to clarify.

Thanks

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Joao,

The first code has fixed it. Thanks!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts