Joomla Templates Club 406,261 posts

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1081866

Hi Luke,

There are various blocks on header so you need to style for each element, you can try with this custom CSS:

.t3-header.affix .t3-mainnav,
.t3-header.affix .logo,
.t3-header.affix .right-navigation {
    margin-top: -15px;
}

or change to the value as you wish.

Regards

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083361

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1083370

Hi Luke,

By default, this declaration set the height for the main navigation: .navbar-default { height: 96px; }

You can change to your desired value.

In case it doesn’t work, let me know the value you want to change, I will check for you.

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083380

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1083384

I thought you tent to increase the height, if you reduce the height, you will need to care about the min-height value set for the navbar also:

.navbar {
  min-height: 96px;
}

and change to your desired value.

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083390

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1083394

It seems that you removed the height set for .navbar-default class, you need to both of them.

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083395

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1083606

Hi Luke,

That’s border of head search section, you can reduce its height to meet with the height of navbar you changed above:

.head-search {  height: 70px; }

In case that you want to remove that line, you can use this:

.head-search { border-left: none; }

For the search icon on mobile, it due to the margin-top you set for the .right-navigation class:

.t3-header .t3-mainnav, .t3-header .logo, .t3-header .right-navigation {
    margin-top: -15px;
}

to override this, you can use media queries to add style for specific screen resolution. For example, if you NOT want to apply above style on mobile view, you can use this instead:

@media (min-width: 480px) {
.t3-header .t3-mainnav, .t3-header .logo, .t3-header .right-navigation {
    margin-top: -15px;
}
}

It will apply to screen larger than 480px only.

Regards

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083613

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1083784

As I can see it looks fine now, did you get it solved?

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083790

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1083809

Did you add the margin-top for the search & toggle icons? pls try to change the media queries to max-width: 767px instead of max-width: 480px

1 user says Thank You to Saguaros for this useful post

1. lukelee0223

[lukelee0223 Friend lukelee0223Join date: September 2017Posts: 115Downloads:28Uploads:69 Thanks: 16]

#1083821

Hi Saguaros,

Yes I have defined as below:

@media (min-width: 480px) {
.t3-header .t3-mainnav, .t3-header .logo{
    margin-top: -15px;
    }
.t3-header.affix .t3-mainnav, .t3-header.affix .logo, .t3-header.affix .fa-search{
    margin-top: -15px;
    height: 70px;
    }
}

Now I have revised it to 767px and it is working now.
Sorry for interrupting you so much, thanks for your help.
About this topic, I believe all is done.

Thanks again

Luke

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1084166

Glad to hear it’s working now!

[Author]

Posts