Public Forums 71,145 posts

[wolfix Friend wolfixJoin date: March 2007Posts: 75Downloads:8Uploads:3 Thanks: 21 Thanked: 6 times in 2 posts]

#195010

Hi,

I’ve re-positioned the nav bar under the logo…

I’d like to change the height of the nav bar but can’t find the css setting with firebug or chrome properties.

http://360pro.com/purity/description

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

#523632

Within your custom.css file, try adding the following rule . . .


.navbar {
height: 30px;
}

Of course, you can play around with the pixel value until you arrive at the display you’re most happy with.

You will then also want to add an additional rule (within custom.css) as follows:


.navbar-collapse {
max-height: 30px;


Again, you can play around with the pixel value until you arrive at the display you’re most happy with.

Hope That Helps

1 user says Thank You to TomC for this useful post

1. wolfix

[wolfix Friend wolfixJoin date: March 2007Posts: 75Downloads:8Uploads:3 Thanks: 21 Thanked: 6 times in 2 posts]

#523639

Thanks Tom, that worked…

Now I need to reduce the height of the box that displays the little white line under the active link… I’ve tried several things but I’m missing something.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#523770

You can try to put these css rules into the custom.css that Tom suggested above:

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
height: 45px;
}

Adjust the height until you get perfect result.

2 users say Thank You to phong nam for this useful post

1. TomC
2. wolfix

[wolfix Friend wolfixJoin date: March 2007Posts: 75Downloads:8Uploads:3 Thanks: 21 Thanked: 6 times in 2 posts]

#524144

Thanks Leo!

[wolfix Friend wolfixJoin date: March 2007Posts: 75Downloads:8Uploads:3 Thanks: 21 Thanked: 6 times in 2 posts]

#524150

<em>@Leo Burnetts 412630 wrote:</em><blockquote>You can try to put these css rules into the custom.css that Tom suggested above:

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
height: 45px;
}

Adjust the height until you get perfect result.</blockquote>

Thanks Leo…

Everything but the “hover” works.

Any ideas?

[Hieu Nguyen Admin Hieu NguyenJoin date: November 2005Posts: 678Downloads:36Uploads:0 Thanks: 69 Thanked: 61 times in 1 posts]

#524161

Why not play around with “variables.less”?

Open “less/variables.less” and find this:

@navbar-height: 55px;

Change “55px” to your prefer value.

By doing that, Off-canvas toggle, Logo, Menu Item, Search on the Header will automatically change to fit the new Navbar Height.

For example, if your new Navbar Height is “50px”, then the Off-canvas toggle size will be 50px * 50px. 🙂

Note: Remember to turn on “Developer Mode” while working with LESS. When you finish, turn it off and rebuild “Less to CSS”.

2 users say Thank You to Hieu Nguyen for this useful post

1. phong nam
2. wolfix

[wolfix Friend wolfixJoin date: March 2007Posts: 75Downloads:8Uploads:3 Thanks: 21 Thanked: 6 times in 2 posts]

#524165

Thanks for the reply Hieu!

I’m not familiar with the following concepts or features:

1) less/variables.less
2) off-canvas toggle
3) using Developer Mode while working with Less
4) rebuilding “Less to CSS.

I’ll start by reading through http://www.joomlart.com/documentation/joomla-templates/purity-iii

If you have any direct documentation links to the list above, please reply.

Thanks!

[Hieu Nguyen Admin Hieu NguyenJoin date: November 2005Posts: 678Downloads:36Uploads:0 Thanks: 69 Thanked: 61 times in 1 posts]

#524168

As you might know that Purity III is build on top of T3 Framework V3, so it’s really important that you have some basic knowledge about T3 Framework, Bootstrap and LESS.

T3 Framework documentation can be found here:

http://t3-framework.org/documentation.html

Bootstrap Documentation:

http://getbootstrap.com/

and LESS:

http://lesscss.org/

For a “variables.less” part in my previous reply, my advice is “don’t be afraid to try”! It’s really easy and simple! You can switch back to the default value anytime you want.

Tip: Backup “variable.less” by chaging its name to “variable.less.original” in case you want to look at the default variable’s value.

I will explain further if you have any questions. But you should try first. That’s the best way to learn something new! 🙂

1 user says Thank You to Hieu Nguyen for this useful post

1. wolfix

[Author]

Posts