Ubermenu lines under headlines

[bakrona]

Hi there

I created a menu with ubermenu and it looks great.
However I cannot figure out how to reduce width of the lines below the headlines as they overrun the column so there is no spacing between the lines. it basically looks like one long line. there should be some breaks inbetween (marked with the red lines)

[ruenel]

Hello @bakrona,

Thanks for writing in!

The lines were added by way of custom CSS in the Vanilla skin styling which is part of the Ubermenu plugin. It is assigned in Appearance > Ubermenu > Main Ubermenu Configuration > Basic Configuration > Skin. The line thickness and color were using this code in the styling CSS:

.ubermenu-skin-vanilla .ubermenu-submenu .ubermenu-item-header.ubermenu-has-submenu-stack > .ubermenu-target {
    border-bottom: 1px solid #e9e9e9;
}

If you modify the code above increasing the thickness to 4 pixels and change the color to red as an example, you can then put the modified code in X > Theme Options > CSS. You will have something like this:

Hope this helps.

[bakrona]

Hi there

Thank you for your reply.
Color and thikness are fine. The problem i have is the width of the line as it goes from one column to the next without a break (which i marked with the red lines in my picture) Is it bossible to narrow its width?

[tristup]

Hi @bakrona,

To get space between two column borders, you need to add the following custom CSS code into the Theme Options > CSS.

.ubermenu .ubermenu-submenu .ubermenu-column-auto
{
    margin-right: 10px;
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks