Joomla Templates Club 406,261 posts

[G Kor Friend G KorJoin date: November 2016Posts: 28Downloads:38Uploads:12 Thanks: 7 Thanked: 1 times in 1 posts]

#1074029

Does anyone know how to make the top navigation (red horizontal space at the top) to work like the menu navigation? In other words, I would like to make it stay on the top of the page like the logo and the main menu when the user scrolls down the page.

Thank you in advance!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1074158

Hi
Add below code in /css/custom.css file

@media screen and (min-width: 992px){
.has-slideshow .t3-header {
    background: none;
    padding-top: 55px;}}
.t3-topbar {
    background: #a22631;
    position: fixed;
    width: 100%;
    z-index: 1;
}

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. G Kor

[G Kor Friend G KorJoin date: November 2016Posts: 28Downloads:38Uploads:12 Thanks: 7 Thanked: 1 times in 1 posts]

#1075093

Hi thank you for the reply, however I face some problems:

1) How I can load the /css/custom.css file?

2) If I add the proposed css in the template.css file then I the main menu navigation is lost when I scroll down and only the top navigation remains at the top.

Thank you for the assistance.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1075231

Hi
Open template folder/css/custom.css file
If the file is not present kindly create and add the code, also share the URL of the site on which you applied changes.

Regards

[G Kor Friend G KorJoin date: November 2016Posts: 28Downloads:38Uploads:12 Thanks: 7 Thanked: 1 times in 1 posts]

#1075344

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1075540

Hi
Replace the older code with this one

@media screen and (min-width: 992px){
.has-slideshow .t3-header {
    background: none;
    top: 40px!important;
    }}
.t3-topbar {
    background: #a22631;
    position: fixed;
    width: 100%;
    z-index: 1;
}

I tested it on your site and it should work.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. G Kor

[G Kor Friend G KorJoin date: November 2016Posts: 28Downloads:38Uploads:12 Thanks: 7 Thanked: 1 times in 1 posts]

#1076014

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1076083

Hi
Replace the top bar code with this code

.t3-topbar {
    background: #a22631;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 0;
}

It work for all pages.

Regards

[Author]

Posts