We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Matthias Ullmeyer
  2. General Discussion
  3. Friday, 25 April 2014
  4.  Subscribe via email
In Development Mode I can't center the Mainmenu

It ist possible to float left or right

@media (min-width: 768px) {
.navbar-nav {
float: right;
margin: 0;
}

But I didn't manage to center the whole menu. Would be greatful for a piece of advice.

Thanks in advance
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Matthias,

just add in your template following code

.navbar-nav {
display: table;
float: none;
margin: 0 auto;
}

Of course you can use it with media queries. How you want.

Eugen
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Matthias,

To align main menu, open the navbar.less file (templates/t3_bs3_blank), find the code:

// Navbar

// -------

.t3-navbar {

padding-left: 0;

padding-right: 0;

}


Replace with:

// Navbar

// -------

.t3-navbar {

padding-left: 0;

padding-right: 0;

float: center;

}


Please compile LESS to CSS.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry Luna but float: center; is not a valid css property and will doesn't take any effects for the menu!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Eugen,

Thanks for your passion and contribution, I see a lot of great answers from you. :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Mathias,

To center your main menu, please add the following code to the custom.css file (templates/t3_bs3_blank/css).

.navbar-nav {
float: none;
text-align: center;
}

.navbar-nav li{
text-align: left;
}

.navbar-nav > li{
float: none;
display: inline-block;
}


This will work on responsive as well - tested. Check attached image to see how it works.

Gardner.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.