Public Forums 71,145 posts

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#694750

How to change the height of the megamenu ? I searched for 6 hours and can’t find the answer.

See the photo what I mean exactly.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#694772

Hi,

Try to do this suggestion below

Create templates/purity_iii/css/custom.css file and add new rule

.navbar-default .navbar-nav > li > a {
line-height: 55px;
}

.t3-wrapper #t3-mainnav {
line-height: 55px;
}

.logo-image > a {
max-width: 160px;
max-height: 55px;
}

and change the highlighted value as you wish.

Regards

1 user says Thank You to Ninja Lead for this useful post

1. pawelgol4

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#750406

Hi,

Try to do this suggestion below

Create templates/purity_iii/css/custom.css file and add new rule

.navbar-default .navbar-nav > li > a {
line-height: 55px;
}

.t3-wrapper #t3-mainnav {
line-height: 55px;
}

.logo-image > a {
max-width: 160px;
max-height: 55px;
}

and change the highlighted value as you wish.

Regards

1 user says Thank You to Ninja Lead for this useful post

1. pawelgol4

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#694780

Thank you for the answer 🙂 I really appreciate it.

This let me only increase the height of the megamenu. However when I enter smaller value like 30px there is no change. Some other setting won’t let me decrease the height…

Any idea ?

Please help 🙂

Regards

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#750414

Thank you for the answer 🙂 I really appreciate it.

This let me only increase the height of the megamenu. However when I enter smaller value like 30px there is no change. Some other setting won’t let me decrease the height…

Any idea ?

Please help 🙂

Regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#694913

<em>@pawelgol4 495274 wrote:</em><blockquote>Thank you for the answer 🙂 I really appreciate it.

This let me only increase the height of the megamenu. However when I enter smaller value like 30px there is no change. Some other setting won’t let me decrease the height…

Any idea ?

Please help 🙂

Regards</blockquote>

Are you referring to the size of your megamenu main-nav items relative to the blue (header) bar?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#750437

<em>@pawelgol4 495274 wrote:</em><blockquote>Thank you for the answer 🙂 I really appreciate it.

This let me only increase the height of the megamenu. However when I enter smaller value like 30px there is no change. Some other setting won’t let me decrease the height…

Any idea ?

Please help 🙂

Regards</blockquote>

Are you referring to the size of your megamenu main-nav items relative to the blue (header) bar?

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#694916

Thanks for the answer 🙂 I’ve attached photo in my first post what I mean, I’ll try explain again. I want to change the height of the megamenu: the height of blue bar at the very top of the page with logo and ‘home’ in it. I’m attaching this photo again.

Ninja’s lead solution partially works as it let’s me increase size if I enter some value bigger than 55px but if I decrease 55px to smaller value the height remains unchanged. And I want to know how to decrease…

Thx for help

Regards

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#750440

Thanks for the answer 🙂 I’ve attached photo in my first post what I mean, I’ll try explain again. I want to change the height of the megamenu: the height of blue bar at the very top of the page with logo and ‘home’ in it. I’m attaching this photo again.

Ninja’s lead solution partially works as it let’s me increase size if I enter some value bigger than 55px but if I decrease 55px to smaller value the height remains unchanged. And I want to know how to decrease…

Thx for help

Regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#694917

If I’m understanding correctly what you’re trying to do, you can try this . . . .

Within the same custom.css file you created, paste the following CSS rule:


.t3-mainnav {
height: 30px;
}

Play around with the value for the “height” property until you arrive at the result you’re most happy with.

You should, then, be able to adjust the other CSS rules (recommnded by NinjaLead) to further adjust the display.

1 user says Thank You to TomC for this useful post

1. pawelgol4

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#750441

If I’m understanding correctly what you’re trying to do, you can try this . . . .

Within the same custom.css file you created, paste the following CSS rule:


.t3-mainnav {
height: 30px;
}

Play around with the value for the “height” property until you arrive at the result you’re most happy with.

You should, then, be able to adjust the other CSS rules (recommnded by NinjaLead) to further adjust the display.

1 user says Thank You to TomC for this useful post

1. pawelgol4

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#694919

Yes this code actually changes what I am talking about BUT as I said it won’t let me go below value 55px

for example, code:

.t3-mainnav {
height: 80px;
}

makes the height 80px

but code:

.t3-mainnav {
height: 30px;
}

makes the height 55px (NOT 30px like it should)

so there must be somewhere else condition that doesn’t let me go below 55px value.

Thank you for your responses 🙂 Any idea where to change so I can have height below 55px ?? Somewhere must be condition like minimum height or something.

Regards

[pawelgol4 Friend pawelgol4Join date: October 2015Posts: 44Downloads:1Uploads:0 Thanks: 7 Thanked: 3 times in 2 posts]

#750443

Yes this code actually changes what I am talking about BUT as I said it won’t let me go below value 55px

for example, code:

.t3-mainnav {
height: 80px;
}

makes the height 80px

but code:

.t3-mainnav {
height: 30px;
}

makes the height 55px (NOT 30px like it should)

so there must be somewhere else condition that doesn’t let me go below 55px value.

Thank you for your responses 🙂 Any idea where to change so I can have height below 55px ?? Somewhere must be condition like minimum height or something.

Regards

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#695583

Hi,

If you want to change megamenu with height to 30px, you have to do this

+ Open templates/purity_iii/css/custom.css and add whole css style below

@media screen and (min-width: 991px) {
.navbar-default .navbar-nav > li > a {
line-height: 30px;
}
}

.t3-mainnav {
height: 30px;
}

.t3-wrapper .navbar {
height: 30px;
min-height: 30px;
}

body {
padding-top: 30px;
}

+ Once done remember to clear cache from admin area and check it again. Let me know the result

Regards

1 user says Thank You to Ninja Lead for this useful post

1. pawelgol4

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#750732

Hi,

If you want to change megamenu with height to 30px, you have to do this

+ Open templates/purity_iii/css/custom.css and add whole css style below

@media screen and (min-width: 991px) {
.navbar-default .navbar-nav > li > a {
line-height: 30px;
}
}

.t3-mainnav {
height: 30px;
}

.t3-wrapper .navbar {
height: 30px;
min-height: 30px;
}

body {
padding-top: 30px;
}

+ Once done remember to clear cache from admin area and check it again. Let me know the result

Regards

1 user says Thank You to Ninja Lead for this useful post

1. pawelgol4

[Author]

Posts