Docs

[Somnium]

Hi, I added this code for my topbar. It works for me but I want to customize them a little bit. I need my phone number and email in front of the social icons. At the moment number and mail are left aligned. Additional I want to change the color and the hover color. How can I do this?

<a href="/contact"><i class='x-icon x-icon-phone' data-x-icon=''></i> +0000000</a>   |   <a href="mailto:[email protected]"><i class='x-icon x-icon-envelope' data-x-icon=''></i> [email protected]</a>

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Somnium]

This reply has been marked as private.

[Joao]

Hi There,

Regarding your first post, please add the following code to Appereance > Customizer > Custom > CSS

.x-topbar .p-info {
    margin-left: 65%;
    color: white;
}
.x-topbar .x-social-global {
color: white;
}
.x-topbar .p-info a:hover {
    color: red !important;
}

.x-topbar, .x-colophon.bottom {
    background: lightblue;
}

Alternatively to use gaps to place your buttons aligned, you can add the following CSS

.x-feature-box.center-text.top-text.cf {
    min-height: 350px;
}

If you need further help, please turn of the security plugin that protects your source code temporarily to make our life easier 🙂

Thanks

[Somnium]

Hi, thx for your fast reply 🙂

The first code works well on Desktop, but on mobile phone it is compressed and looks not so great.

The second one doesn’t work for me. Is there any opportunity to get the right Space for every feature box an my page?
Through the different text length in the box is the css not working for me. If I use them the buttons are everywhere but not there I want to have 😉

[Rad]

Hi there,

1. Please change the first CSS to this,

.x-topbar .p-info {
    color: white;
}
.x-topbar .x-social-global {
color: white;
}
.x-topbar .p-info a:hover {
    color: red !important;
}

.x-topbar, .x-colophon.bottom {
    background: lightblue;
}

@media (min-width: 979px) {
.x-topbar .p-info {
    margin-left: 65%;
}
}

2. Then please remove this CSS,

.x-feature-box.center-text.top-text.cf {
    min-height: 350px;
}

3. Then please remove the gap element that you added before and after the buttons

4. And for final fix, please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($){

function resize_feature_box() {

$('.x-section').each( function() {

if ( $(window).width() > 979 ) {

var feature_box = $(this).find('.x-feature-box');

if( feature_box.length > 0 ) {

var min_height = 0;

feature_box.each( function() {

var feature_box_content_height = $(this).find('.x-feature-box-content').height();

if ( feature_box_content_height > min_height ) {

min_height = feature_box_content_height;

}

} );

$(this).find('.x-feature-box-content').css('height', min_height );

}

} else {

$(this).find('.x-feature-box-content').css('height', 'auto' );

}

} );

}

resize_feature_box();

$(window).load(resize_feature_box).resize(resize_feature_box);

} );

That should equalize the height of the content.

Cheers!

[Somnium]

Hey, thx a lot for this issue solving. It works well on mobile phone and Desktop Version. 🙂

There is only one little issue. On my Tablet this solutions works partly. The content high works well if i hold the tablet in landscape format. If i hold them in upright format the buttons jumps to different positions.

[Rue Nel]

Hello There,

Thanks for updating in! The portrait and landscape mode on a tablet has different screen size. So when you view your site, it is inevitable that the position of the buttons will be different when viewing in landscape or portrait. If you want to have the look, simply change the 979 pixels to 1024 pixels in the code that @Rad gave you.

Please let us know how it goes.

[Author]

Posts