Few issues with Top Bar & Logo Bar!

[core365]

Hi, I’ve just started working on a site and I’m having a few issues with the top bar and logo bar and can’t figure it out myself I’m afraid, so I hope you’ll be able to help me out please!

I’ve put a background image in the logo bar and there’s a few things I don’t know the CSS to fix:

1. Can the background image in the logo bar start at the top of the page instead of under the top bar - I’ve made the top bar transparent as I thought that would sort it, but it doesn’t!

2. I’d like the background image to fill the width of the screen instead of having to repeat.

3. I’d like the top bar, logo bar and nav bar to stay on the screen when scrolling down the page - at the minute it disappears off the top!

The URL is (please don’t judge it, I’ve literally just started designing it!!!):
http://www.bodyandmindtherapies.net

Thanks!

[ruenel]

Hello @core365,

Thanks for writing in! Regretfully we cannot checked your site and correct it according to what you have listed in this thread because the site is under construction mode. Would you mind providing us some access to your site? Please insert the credentials by adding a secure note in your next reply. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

[core365]

Hi, I’m so sorry about that, I forgot it was in construction mode! Do you know when the passcode lock feature will be fixed so people can enter a password to bypass the maintenance screen and view the site because that was a really useful feature!

I’ll add the login details to a secure note.

Thanks!

[thai]

Hi There,

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

To achieve that, please add the following CSS under Theme Options > CSS:

.home .x-topbar,
.home .x-logobar {
    position: fixed;
    width: 100%;
}
.home .x-navbar {
    top: 268px;
}
.admin-bar .x-navbar {
    top: 300px;
}

@media (max-width: 979px){
    .x-navbar-fixed-top, 
    .x-navbar-fixed-left, 
    .x-navbar-fixed-right {
        position: fixed;
    }
}

.home .masthead.masthead-stacked {
    position: absolute;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[core365]

I really appreciate that, thanks! I’ve added in a slider and the slider now starts at the very top of the page behind the topbar and logobar, is it possible for it to start under the navbar?

Thanks!

[thai]

Hi There,

Please also add this custom CSS:

.home .x-slider-container.below {
    margin-top: 308px;
}
@media (max-width: 979px){
    .home .x-slider-container.below {
        margin-top: 334px;
    }
}
@media (max-width: 767px){
    .home .x-slider-container.below {
        margin-top: 320px;
    }
}

Hope it helps

[core365]

That’s great, thank you!

With regards to the background image in the logobar, can it fill the width of the screen instead of having to repeat?

And one last thing! When viewed on a mobile, I’d like the topbar, logobar and navbar to go from the screen when you scroll down, is this possible to do, but to keep those fixed when viewed at a larger screen size?

Thanks!

[nabeel]

Hi again,

• For the logo background image please find this code:

.home .x-logobar {
    background: rgb(255,255,255) url(http://www.bodyandmindtherapies.net/wp-content/uploads/2018/12/Body-Mind-Header-Swoosh-Smaller.png) !important;
    top: 0;
    height: 300px;
}

And replace it it with this one:

.home .x-logobar {
    background: rgb(255,255,255) url(http://www.bodyandmindtherapies.net/wp-content/uploads/2018/12/Body-Mind-Header-Swoosh-Smaller.png) !important;
    top: 0;
    height: 300px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

• To make the logbar and topbar static in small devices instead of fixed then you can make use of the following code:

@media screen and (max-width: 979px) {
    .home .x-topbar, 
    .home .x-logobar, 
    .x-navbar-fixed-top, 
    .x-navbar-fixed-left, 
    .x-navbar-fixed-right {
        position: relative !important;
    }
    .home .x-slider-container.below {
        margin-top: 0px !important;
    }
    .home .x-navbar {
        top: auto !important;
    }
    .admin-bar .x-navbar {
        top:  auto !important;
    }
}

Hope this helps!

[core365]

That’s brilliant, you’ve sorted it all out! Many thanks, your time and help is very much appreciated!

Cheers

[Prasant]

You are most welcome.