[Resolved] Header Fixed at Top

[Author]

Posts

[phuong-phiD]

I'm making a website for the first time. I use the Toolset Starter Child and I have created a header with a menu as described in
https://toolset.com/documentation/user-guides/hierarchical-layouts/. The header works and I can style it by adding CSS code.

However I want the header to be fixed at the top. According to this thread https://toolset.com/forums/topic/settings-for-navbar-menu-in-layouts/#post-284091 I can find the CSS for a fixed navigation bar at hidden link. But It looks like it needs to be defined in the html:
<nav class="navbar navbar-default navbar-fixed-top">
So I don't know how to apply this to the CSS for the header.

Q1. Does .navbar refer to the menu cell in Layout?
Q2. What is the difference between .ddl-navbar and .navbar?
Q3. What is the CSS code that I need to add to have the header fixed tot the top?
Q4. If the menu is fixed to the top then will the logo in the header also be fixed?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Phuong,

Thank you for contacting our support forum.

Q1. Does .navbar refer to the menu cell in Layout?

Yes this is the class of the navbar

Q2. What is the difference between .ddl-navbar and .navbar?

.ddl-navbar is a class applied by layouts to shows that this navbar was added using layouts.

Q3. What is the CSS code that I need to add to have the header fixed tot the top?

Bootstrap provides examples here to allow for the fixed navbar
hidden link

Q4. If the menu is fixed to the top then will the logo in the header also be fixed?
The logo and menu are independent so they the logo would not be fixed at the top.
Additional work would be needed to do this.

Please let me know if this helps.
Thanks,
Shane

[phuong-phiD]

Hi Shane, thank you for helping me.

According to the bootstrap example at hidden link, I have to add .navbar-fixed-top
[/php]
<nav class="navbar navbar-default navbar-fixed-top"> </nav>
[/php]
But I already found that as explained in my first post.

Q1. So my main question is where and how to add .navbar-fixed-top in Layouts or Layouts CSS?
Q2. Do I have to use .ddl-navbar instead of navbar if I want to change the navbar style?

[phuong-phiD]

Any suggestions? Or could you at least tell me where I can find the solution in the documentation.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Phuong,

Sorry for the delayed response but I tried to implement this on a local theme but was not successful, I cant seem to find a way to add the class to the header.

You can try using this plugin here https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/screenshots/

It allows you to get the sticky menu.

Please let me know if this helps.
Thanks,
Shane

[phuong-phiD]

Hi Shane, thank you for your effort. I have also been looking for a solution the last few days and I found it in this thread https://toolset.com/forums/topic/css-under-toolset-starter-theme-layout/
The extra classes can be added in the Layout screen of the menu cell:
Tag classes: navbar-fixed-top

And to style the navigation bar I had to add this to the Custom CSS:
.ddl-navbar.ddl-navbar-default, .navbar-fixed-top {
background-color: black;
}

I really wish that this was mentioned somewhere in the documentation.

[phuong-phiD]

In Layouts I added "navbar-fixed-top" to the menu element. With the developer tool inspector I see that the menu element is actually class "col-sm-12" and "navbar-fixed-top" is added it. Inside of the menu element is the "ddl-navbar". So I don't want to add to "col-sm-12" but to "ddl-navbar".

Q1. How do I add a class to the "ddl-navbar" instead?

Q2. if I want to style the bootstrap component "navbar", then do I have to apply a custom CSS style to both "ddl-navbar" and "navbar"?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi

I tried to get the css class there but layouts will only add it to the wrapper div.

This is why the plugin below was suggested.
https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/screenshots/

It works perfectly 🙂

Thanks
Shane

[phuong-phiD]

Hi Shane, the header on top is just one case where I need to add a class to any element. From your answer I conclude that it isn't possible with Layout 🙁

As for my second question. I am totally new with web design. You said before that ".ddl-navbar is a class applied by layouts to shows that this navbar was added using layouts." Does that mean I have to apply custom CSS styling to "ddl-navbar" instead of "navbar"?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Phuong,

That is correct its not possible as Layouts will only add the class to the surrounding div. However you can make that entire div fixed in position, because if the div that surrounds the navigation moves then the navigation should move as well.

If you continue to use Layouts then it would be best to use .ddl-navbar but if you want to proceed without layouts then I would advise that you use the .navbar.

Thanks,
Shane

[phuong-phiD]

Hi Shane, thank you for the support. I will try to proceed without Layouts for now.

[rachelW-3]

I've stumbled across a similar need. So far what I've done is (caveat - I've not quite finished the site so there may be pitfalls I'm not aware of)
> add my site logo and menu in a row
> assign ID and add the following styling:
position: fixed;
z-index: 99;
min-width: 100%;
> then I added an empty div below that with a height about 70 px or so (same height as the div that contains the menu). This took care of the fixed positioning pulling the rest of the content up.

So far things are playing nice......