Navigation Dropdown Menu Permanently Show

I'm using the Brine template and looking for a way to have my navigation look like the screenshot attached -- Rather than have a dropdown/folder setup, I'd like the "dropdown" sub-links to show all the time rather than having to click to have it show. Is there a way to make all navigation links in a folder automatically show without the click?

Can you share link to your site?

I am just in the front end design phase and have not started development, but my client is looking to achieve this type of menu and I haven't designed a nav menu that way before. So, I don't have a link I can share yet.

8 minutes ago, pmterrell said:

I am just in the front end design phase and have not started development, but my client is looking to achieve this type of menu and I haven't designed a nav menu that way before. So, I don't have a link I can share yet.

I think you can use CSS to force dropdown always show.

Yes, that was my assumption and I'm pretty sure you're correct. Any idea what that css looks like? I am having a tough time finding code to make it happen.

12 minutes ago, pmterrell said:

Yes, that was my assumption and I'm pretty sure you're correct. Any idea what that css looks like? I am having a tough time finding code to make it happen.

I can't give exactly code without check site url. 

7 minutes ago, tuanphan said:

I can't give exactly code without check site url. 

Here is the current site url -- https://www.hforlove.com/ -- but it doesn't have the navigation implemented yet - currently it just has simple links. Maybe it will help though.

4 minutes ago, pmterrell said:

Here is the current site url -- https://www.hforlove.com/ -- but it doesn't have the navigation implemented yet - currently it just has simple links. Maybe it will help though.

you need to create some sample dropdown link, to check code.

Ok, I added some dropdowns under the About folder. https://www.hforlove.com/

Nailed it! Thank you. This works great.

On 12/16/2019 at 9:30 AM, tuanphan said:

Add to Home > Design > Custom CSS

.Header-nav-folder {
    left: 0;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

 

One more question on this.... What if I want to do this only for the homepage, but want the rest of the site to have normal folders?

59 minutes ago, pmterrell said:

One more question on this.... What if I want to do this only for the homepage, but want the rest of the site to have normal folders?

Add to Home Page Settings > Advanced > Header

<style>
  .Header-nav-folder {
    left: 0;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
</style>

hi, cant get this to work on my page, https://www.eterartdizajn.hr  , im using 7.1? any ideas

On 1/7/2020 at 12:39 AM, tuanphan said:

Add to Home Page Settings > Advanced > Header

<style>
  .Header-nav-folder {
    left: 0;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
</style>

 

i managed to do it, heres the css:

.header-nav .header-nav-item--folder .header-nav-folder-content {
    left: 0;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

but now I have a problem that if I want to click any of the sub folder items i first have to go with my cursor over the folder name to make other items clickable? Do you know a solution for that? Thanks

On 7/6/2020 at 3:50 PM, simicvedran said:

i managed to do it, heres the css:

 

.header-nav .header-nav-item--folder .header-nav-folder-content {
    left: 0;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

 

but now I have a problem that if I want to click any of the sub folder items i first have to go with my cursor over the folder name to make other items clickable? Do you know a solution for that? Thanks

Your code works like a charm, thanks! Did you ever find a solution for this issue? ^

Thanks 

17 hours ago, AlbertRamos said:

Your code works like a charm, thanks! Did you ever find a solution for this issue? ^

Thanks 

What is your site url?