Docs

[Chris Stovall]

I have followed this thread and found it very helpful:
https://community.theme.co/forums/topic/stacked-to-inline-logo-on-scroll/page/2/

You can see the result here:
http://192.163.192.153/~onebigball/

Now I could use a little help customizing the navigation bars

1) How do I adjust the size and position of the inline bar?
a) I would like to make it so that the text stays centered and in the same position from the stacked bar to the inline bar when it changes
b) I would like to add the inline logo to the left of the bar that now doesn’t move or at the very least be able to center all of the content

2) How do I change the height of the bar and affect the logo position both horizontal and vertical?

3) How do I make it so that the stacked bar only appears on the homepage?

Thanks!

[Rad]

Hi there,

Thanks for posting in.

1. Please add this CSS as well 🙂

@media ( min-width: 980px ) {
.masthead-inline .desktop .x-nav {
    float: none;
    margin: 0 auto;
    display: inline-block;
}

.x-nav-wrap.desktop {
    display: block;
    text-align: center;
}
.x-navbar a.x-brand {
position: absolute;
}
}

2. Alignments and navbar height should be available at Admin > Appearance > Customizer > Header. Logo has its own top alignment (distance from top). And Navbar has height setting and top alignment too. You can play with those settings 🙂

3. Prepend your CSS and jQuery selector with .home. Examples,

.home .x-navbar a.x-brand {
position: absolute;
}

$(".home .x-brand img")

Hope this helps.

[Chris Stovall]

Number 3 is a little beyond me. Can you please explain how I would use this to hide the top logo on all pages but the home page exactly.

Sorry!

NEWB.

[Rad]

Hi there,

Sorry was confused too, do you wish your header to be permanently in stacked layout on other pages? And this stack to inline effect should be at home page only? If yes, then instead of adding your custom CSS and javascript to customizer, just add it at your home page’s cornerstone custom CSS and javascript. Those CSS and javascript will be active only when home page is loaded.

Thanks!

[Chris Stovall]

http://192.163.192.153/~onebigball/

1) Works for me for now

2) The settings for the logo are only being applied to the main logo in the bar above the navigation. It doesn’t affect the logo within the nav bar. Where or how to I affect this?

3) One the home page I would like to see the large logo on above the nav bar. On all other pages I only want to see the nav bar with the logo in it.

Thanks!

[Jade]

Hi there,

Please find and adjust this CSS for the navbar logo:

.x-navbar a.x-brand {
    width: 80px;
    height: 80px;
    background: url(http://192.163.192.153/~onebigball/wp-content/uploads/2015/12/obb-logo-inline-animated-2.gif) no-repeat left center;
    background-size: contain;
    margin-top: 10px!important
}

Hope this helps.

[Chris Stovall]

Does this take care of all 3 questions?

[Rupok]

Hi there,

Thanks for writing back. #1 is not a question I guess. However you can alter the CSS as needed for the rest of the questions.

Cheers!

[Chris Stovall]

Please help me figure out how to do this. I have yet to see the answer.

One the home page I would like to see the large logo on above the nav bar.
On all other pages I only want to see the nav bar with the logo in it and NOT the large logo above.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer, this will hide the logo bar on secondary pages and not on home page.

body:not(.home) .x-logobar {display: none;}

Hope it helps, Cheers!

[Author]

Posts