Docs

[KCrem]

With the Stacked header setting the logo dissapears when you scroll down. I found some CSS on the forum and this is what I added:

.x-navbar.x-navbar-fixed-top {
top: 86px;
}
.x-logobar.fixed-top {
position: fixed;
top: 0;
right: 50;
left: 0;
width:20%;
margin: 0 auto;
}
.x-logobar.fixed-top img {
width:90%;
}
.x-logobar.fixed-top img {
height:90%;
}
.x-logobar.fixed-top {
max-width:1500px;
}

.x-navbar.x-navbar-fixed-top {
max-width:1500px;
margin:0 auto;
}

body .x-navbar.x-container.max.width {
width:100% !important;
}

I also added the Java Script that i found:

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 1) {
$(‘.x-logobar’).addClass(“fixed-top”);
} else {
$(‘.x-logobar’).removeClass(“fixed-top”);
}
});
});
jQuery(function($) {
$(window).scroll(function(){
if($(window).scrollTop()<=0) {
$(‘.x-navbar’).removeClass(“x-navbar-fixed-top”);
}
});
});

I have manipulated it so that the logo sticks and moves to the left, but the background is transparent to the right of the logo. Ideally, I would like the logo to be in line with the nav bar menu, and get rid of the transparency above the nav bar.

What’s missing?

http://full-effect.flywheelsites.com/

[Rue Nel]

Hello There,

Thanks for writing in!
Your provided url asked for access information to be able view your site (http://prntscr.com/aqf2i5). Would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[KCrem]

http://full-effect.flywheelsites.com/wp-admin

Authentification:

flywheel
waggish-eggs

Wordpress:

cremonese3
Vail1Realty

[Nico]

Hi There,

Would you mind change the login details and send it us again in private reply.

Thanks

[KCrem]

This reply has been marked as private.

[KCrem]

Also…When I add the slider it creates a margin on the left, and there is a space under the Nav bar above the slider. If I switch back to “inline” header, the space and the margin go away. I need to fix that as well.

[Christopher]

Hi there,

Please find this code :

.x-logobar.fixed-top {
    position: fixed;
    top: 0;
    right: 50;
    left: 0;
    width: 20%; 
    margin: 0 auto;
}

And update it to :

.x-logobar.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
}

Add this as well:

.x-logobar.fixed-top a {
    width: 20%;
    float: left;
    top: 14px;
    position: relative;
}
.home .x-container.max.width.offset {
    margin-top: 0;
}

Hope it helps.

[Lely]

Hi There,

Thank you for the credentials.
Using the above to achieve what you want will need a lot of CSS because the structure is different from stack to inline logo. Please try to use the suggested code here:
https://community.theme.co/forums/topic/stacked-to-inline-logo-on-scroll/page/3/#post-641650

For the space, please use Slider Settings: Below Masthead instead of adding the slider inside cornerstone page. To do this, edit page > Page Settings > Slider Settings: Below Masthead: Select the revolution slider on Slider Dropdown. Then remove the slider you have added using Cornerstone.

Hope this helps.

[KCrem]

Here is what we have achieved:
1.Stacked logo stays visible when scrolling.
2.Logo shrinks

Here’s what I need to achieve:
1. Minimize the space between the logo and the nav links.
2. shrink the header on mobile. when I scroll down on my phone the header stays super tall, and the logo is super tiny.

Below is the CSS that we used. Can I add something to fix the height of the navbar / header?

.x-navbar.x-navbar-fixed-top {
top: 80px;
}
.x-logobar.fixed-top {
position: fixed;
top: 0;
left:0;
right:0;
margin: 0 auto;
}
.x-logobar.fixed-top a {
width: 20%;
float: center;
top: 10px;
position: relative;
}
.home .x-container.max.width.offset {
margin-top: 0;
}
.x-logobar.fixed-top img {
width:80%;
}
.x-logobar.fixed-top img {
height:50%;
}
.x-logobar.fixed-top {
max-width:5000px;
}

.x-navbar.x-navbar-fixed-top {
max-width:2500px;
margin:0 auto;
}

body .x-navbar.x-container.max.width {
width:100% !important;
}

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-logobar-inner {
    padding-bottom: 0;
}

This reduces the spacing between the logo and the nav.

Regarding the mobile issue, we are unable to replicate the issue on our end. The logo isn’t tiny but remains the correct size.

To reduce the logo and mobile nav button which will reduce the size of the header you can use the following CSS/

.x-logobar .x-logobar-inner a img {width: 200px;}

a.x-btn-navbar.collapsed, a.x-btn-navbar {
    font-size: 20px;
}

You can adjust the values as you see fit.

Let us know how that goes. Hope this helps – thanks!

[Author]

Posts