Help with footer design

[nedo_drehemov]

I cant make my footer as I want it to look

. Cannot access the edit mode of the footer and header with cornerstone. I am adding social links to top header but they are not visible.

[ruenel]

Hello Nedko,

Thanks for writing in!

Please be advised that with X theme, you will be limited to the default Header and Footer. You cannot use Cornerstone to edit the header and footer. If you are more interested in having control over all aspects of the footer I suggest that you consider the Pro theme which has a Footer builder and you can use various elements to create a footer.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Hope this helps.

[nedo_drehemov]

Thanks for the answer. Can you tell me would I be able to design the footer as specified above if I upgrade to pro. Are those moduls available to be added?

[nedo_drehemov]

Also I am adding social links to top header but they are not visible. Can you tell me why?

[ruenel]

Hello Nedko,

Thanks for updating in!

1.) If you upgrade to Pro, you can design the footer they way whatever you want it. You can add those elements in the custom footer with the help of the elements present in the builder.

2.) The social icons were already displayed in the topbar as shown in the image below:

3.) Even if you do not upgrade to Pro, you can still have a 3 column footer area. Simply go to X > Theme Options > Footer and enable the Footer Widget Area. Select 3 columns and then you can go to Appearance > Widgets and insert text widget in the Footer 1, Footer 2 and Footer 3 widget area. You will have to manually add the text and icons in the widget area so that it will be displayed in your footer.

Hope this helps. Please let us know how it goes.

[nedo_drehemov]

thank you. One more question. Why when I switch to mobile screen the telephone number in the top bar is presented in gray. when in desktop screen it is all in pink as it should be?

[jade]

Hello Nedko,

Please add this code in the Element CSS of the element where you added the phone number:

$el a {
    color: #fff !important;
}

Element CSS | Themeco Docs

Hope this helps.

[nedo_drehemov]

Hello I tried several times but nothing works. I tried to enter the code into several fields but nothing changes. I think i am adding it to the wrong element.

[friech]

Hi Nedko,

I think you’re referring to the pink background and not the telephone number. If so, please add this to Theme Options > CSS

@media (max-width: 767px) {
	.x-topbar .p-info {
		background-color: transparent;
	}
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!