Public Forums 71,145 posts

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#1017465

Background:

My new site is not uploaded, only xampp on personal PC.

It uses T3 with t3_bs3_blank. My customizations are in LESS files within /template/local/less folder. I am in Development mode, and sometimes I click the Less to Css compile button just to be sure.

I am using collapse menu with standard T3 breakpoints.

My navbar has 5 links and a logo-image on the navbar.

Old site:

Here is a link to one of my older sites that I built for free for a local sportsman’s club. HERE

The navbar is sticky, and it has a logo-image. You can see that the navbar link text is too small; maybe some day I will fix that. On collapse, the logo image stays on the navbar. Try it!

New Site:

I am using a similar navbar, but with a larger bold font for the links: navbar.less line 163 : ’20px and bold’.

It looks much better.

I am also using a larger navbar link spacing: variables/less line ~330: @nav-link-padding: 10px 30px; //T3 was 10 & 15

Here is my problem:

On medium screens (width = 992 – 1199px), there is not enough room on the navbar for large links and the logo image.

If I change the link-font size to 16px and the link-spacing to 15px, then there is enough room, but now my lg-screen link font & spacing look "too small".

The solution is two steps:

1 – create different nav-link-padding values for md vs. lg screens.

2 – create different nav-link fonts for md vs. lg screens. I haven’t attempted this yet, but I think it will be @media rules on line 160 of navbar.less.

For Step 1, this is what I have attempted:

A – /local/less/themes/theme1/variables-custom.less : new item @nav-link-padding-sm: 10px 15px;

B – /local/less/variables.less :
@nav-link-padding: 10px 30px; @nav-link-padding-sm: 10px 15px;

C – /local/less/navigation.less :

@media (max-width: @screen-md-max) {      //<= 1199px

@nav-link-padding-sm;

display: inline-block;

 }

@media (min-width: @screen-lg-min) {     //>= 1200px

@nav-link-padding;

display: inline-block;

}

I placed the "C" items under > li > separator, and also under > li > span.

I doesn’t work!

The nav-link-padding stays at 30 pixels for all md and lg screen sizes. The firebug trace only goes back to bootstrap.less.css. If I manually change the firebug css value of 30 to 0, I can instantly see the nav-link-spacing shrink to nothing.

So the T3 nav-link-padding variable can be adjusted, but the T3 framework is not recognizing my new nav-link-padding-sm parameter for md screens. Either I set it up wrong, or my new parameter is being overridden?

I can’t figure it out.

So I have two questions:

1 – How to achieve different nav-link-padding for md vs. lg screens.

2 – Is navbar.less line 160 the proper place to start for different link-font sizes for md vs. lg screens?

Thanks!

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

#1018492

Hi,

It’s better with a closer look at your site and detect the issue. Could you put your site online so I can check?

Regards

[Author]

Posts