How to Put Social Media Icons in Line with Logo & to Stay Fixed When Scrolling Down Page

Support
#1

Hi, I’m working on a new site and wondered if you’d be able to help me with the following please:

  1. Is it possible to have the social media icons in the top bar on the same line as the logo - they can stay to the right of the page as they are currently?

  2. The nav bar is fixed, so when you scroll down it stays at the top of the screen. Can the logo and social media icons also be fixed, so they stay above the nav bar when you scroll down the page?

  3. Home page - When viewed on a smartphone, the slider I’ve added goes behind the mobile button. Can the slider start under it?

I’ll put the website details in a private note as it’s got a maintenance up at the minute and I need to give you the password to access it!

Thanks!

#2

Hi There,

1- Please add the following code to Theme Options CSS

.x-topbar .x-social-global {
   float: none;
}

2 Unfortunately, that is not possible with X out of the box. It could be possible with custom development.

Hope it helps!

3- Please add the following code to Theme Options CSS

@media (max-width: 979px) {
.x-main.full {
   
    padding-top: 80px;
}}
#3

Hi, thanks for the help, however this one isn’t working:

  1. The CSS you gave to have the social media icons in line with the logo doesn’t work, they’re still at the very top of the page above the logo but are now aligned to the left of the page instead of the right!

Cheers

#4

Hi There,

Please also add this CSS:

.x-topbar {
    position: absolute;
    width: 100%;
    background-color: transparent;
}
.x-topbar .x-social-global {
    float: left;
    margin-top: 20px;
}
1 Like
#5

Hi Thai

Brilliant, thank you! That’s worked great, thanks!

#6

We’re delighted to assist you with this.

Cheers!