Joomla Templates Club 406,261 posts

[psihohealer Friend psihohealerJoin date: August 2010Posts: 33Downloads:5Uploads:3 Thanks: 5]

#205824

currently the width of the container for main navigation is only 50% of the screen wide.

the rule comes from bootstrap.less and its defined as following:

<nav id=”t3-mainnav” class=”navbar navbar-default t3-mainnav col-md-6 col-sm-1″>

with css rule in bootstrap.less

@media (min-width: 992px)
.col-md-6 {
width: 50%;

defining the width of the usable space for menu container. how to change it to 70 or 80% without affecting the rest of the content that also uses col-md-6 class. since it seems javascript is rewriting the rule on client side i cant define it in custom.css

please help

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

#568374

Hi

Instead of changing the css for the col-md-6, you can change the grid of the mainnav to a greater value for example: col-md-8.

However, you will need to consider to change the grid of other elements used in header to make sure that the total grid is 12.

For instance, the header of your site contains logo and the main nav, if you set the mainnav with ‘col-md-8‘, you will also need to change the grid of logo to ‘col-md-4‘

In case that you want to override css, you can use this css rule:


.t3-mainnav.col-md-6 {
/* your custom css goes here*/
}


this css will help to add style for col-md-6 in t3-mainnav only and not affect other part on your site.

1 user says Thank You to Saguaros for this useful post

1. psihohealer

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

#733470

Hi

Instead of changing the css for the col-md-6, you can change the grid of the mainnav to a greater value for example: col-md-8.

However, you will need to consider to change the grid of other elements used in header to make sure that the total grid is 12.

For instance, the header of your site contains logo and the main nav, if you set the mainnav with ‘col-md-8‘, you will also need to change the grid of logo to ‘col-md-4‘

In case that you want to override css, you can use this css rule:


.t3-mainnav.col-md-6 {
/* your custom css goes here*/
}


this css will help to add style for col-md-6 in t3-mainnav only and not affect other part on your site.

1 user says Thank You to Saguaros for this useful post

1. psihohealer

[ypvitstaff Friend ypvitstaffJoin date: October 2008Posts: 5Downloads:18Uploads:3]

#575630

hi, where can i find .t3-mainnav.col-md-6

thank you

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

#575707

It belongs to the mainnav block and you can find the associated php file in this folder: root/templates/uber/tpls/blocks/

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

#642036

It belongs to the mainnav block and you can find the associated php file in this folder: root/templates/uber/tpls/blocks/

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

#740696

It belongs to the mainnav block and you can find the associated php file in this folder: root/templates/uber/tpls/blocks/

[Author]

Posts