Button on top of on image

[patsorules]

Hi there,

I have 2 issues by working on the x theme.

1. I changed everything in the menu o my site, but there is a small border around. I want to change the colour of this. Where is the setting for tis?

2. I want to add an button on top of an image. So like a “Go to” but overlap on the image. I added 3 images but cant get it in the middle of the three images. How can I solve this?

Thanks in advance.

[christian]

Hey @patsorules,

1. Are you referring to the border between the logo and the menu?

If so, that is a fixed design of our theme so it can only be overridden with CSS. Because overriding this part is just a minor cosmetic change, I’ll provide the code to override this. Please add the code below in Theme Options > CSS.

.x-logobar {
    border-bottom: 0;
}

.x-navbar {
    box-shadow: none;
}

2. There are several ways to achieve this:

1. Use the image as the column’s background then add a Button element to the column.
2. Use an overlapping technique shown in our official Youtube tutorial videos

Hope that helps.

[patsorules]

Hi together,

1. Okay so color change isn’t possible?

2. For everyone who is looking for this problem in the future: The newest version of cornerstone has no advance settings at the standard. So you have o go to X > Settings > Permissions > (turn everything on here) > User Preference and turn on Advanced Mode to “Always on”. So you get the option to have an Backround Image. and put the Advance mode to "show

So i got Nr 2 fixed so far. But when I want to bring the last button to the middle and change the Padding like the other 2 buttons to 55, the whole Row is getting smaller?! What is that probleme?

Thank you

[patsorules]

Also the images display not the settings in cornerstone. So per example the section 6 looks fullscreen in cornerstone and when I save it its a thin long picture on the homescreen

[christian]

Hey @patsorules,

Sorry the code for the border color change is this. Change orange to something else. Check out the color values here: https://www.w3schools.com/css/css_colors.asp

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

-----------------------------------------------------------------------------------

Regarding the issue with columns, you will need to set a minimum height or utilize a Gap element to fill the column because otherwise, the row will collapse. An empty column in the builder has a tall height so you can easily see empty columns and drop elements to them. Empty Columns will not display the same in the frontend. Check out this third-party video tutorial.

Hope that helps.