Joomla Templates Club 406,261 posts

[crooked76 Friend crooked76Join date: July 2014Posts: 10Downloads:0Uploads:0]

#199871

What CSS should I place in the custom.css file to center the nav menu? The bonus menu pulls to the left. I want to center it. Has anyone ran across this? I tried setting the follwing:

.nav-categories {
font-size: 1.5em;
}

.navbar-nav {
margin-right: 25%;
margin-left: 25%;
}

That worked at first. However, when the screen is resized the nav links begin to stack instead of shrink and remain center until collapse.

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#543104

@crooked,

Please open file: /templates/your_template_name/css/custom.css then add this rule:

.t3-navbar.navbar-collapse.collapse {
padding-right: 200px;
text-align: center;
}
.navbar-nav {
float: none;
}
.nav > li {
display: inline-block;
float: none;
}

Let me know if this helps

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564308

Thank you Nazario A for your solution. I’ve added the code above to the custom.css and it centered Bonus menu great. But it also centered the drop down submenu 🙁 Do you know how to leave it left aligned? And I have a question about Bonus menu – as I have it center aligned (but it had the same behavior when it was left aligned) – when I’m on the homepage the Bonus menu starts in some specific point but when I’m on the other pages (eg. items from Bonus menu) the Bonus menu moves to the right a little bit (20px?). You can take a look here. Could you, please, help me with this issue? Thank you!

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

#564338

@karca: I checked the URL of your site but I could not see Bonus menu and drop down submenu on your site. It would be awesome if you can possibly include a screenshot and description on that particular screenshot on what you would like to do.

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564377

Hi Ninja Lead, I have Bonus menu on the top of the pages – I moved it from its default position to the very top. Please look at it here again. And what I found out right now is that this code affected not only drop-down submenu (as I wrote above) but also my modules Starsovstvo and Kazatel CB Liberec (they were centered before and now are left aligned :-(). You’ve helped me with centering these modules 🙂

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

#564431

Look at the screenshot below

I see it is showing center align on your site.

---

Attachments:

1. 

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564533

Hi Ninja Lead,
yes, you are right 🙂 But as I wrote above

<blockquote>it centered Bonus menu great. But it also centered the drop down submenu 🙁 Do you know how to leave it left aligned? </blockquote>

I don’t want to have drop down submenu centered, but left aligned 🙂 That is why I’m asking for help. And as I wrote above:

<blockquote>And what I found out right now is that this code affected not only drop-down submenu (as I wrote above) but also my modules Starsovstvo and Kazatel CB Liberec (they were centered before and now are left aligned :-().</blockquote>

Modules Starsovstvo and Kazatel CB Liberec I want to center – and I had it before I added the code for centering Bonus menu. After I added this code for centering Bonus menu, my modules (Starsovstvo and Kazatel CB Liberec) moved to the left where I don’t want them.

And the last question as I wrote above:

<blockquote>And I have a question about Bonus menu – as I have it center aligned (but it had the same behavior when it was left aligned) – when I’m on the homepage the Bonus menu starts in some specific point but when I’m on the other pages (eg. items from Bonus menu) the Bonus menu moves to the right a little bit (20px?). You can take a look here. Could you, please, help me with this issue? Thank you!</blockquote>

Thank you very much!

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

#564632

You can fix it with the solution below

Open templates/ja_appolio/css/custom.css file

find and change

.t3-navbar.navbar-collapse.collapse {
padding-right: 200px;
text-align: center;
}

.t3-navbar.navbar-collapse.collapse {
padding-right: 200px;
}

@media (min-width: 1200px) {
.t3-mainnav .container {
width: 50%;
margin: 0 auto;
}
}

Hope it helps

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564749

Unfortunately the code you´ve gave me split Bonus menu to 2 rows that are not even centered 🙁 But the drop-down submenu is now left aligned 🙂 See picture

Modules Starsovstvo and Kazatel CB Liberec are centered 🙂

Please can you help?

---

Attachments:

1. 

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

#564776

Try to remove css style below in custom.css file


.t3-navbar.navbar-collapse.collapse {
padding-right: 200px;
}


[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#564833

Now it helped with 2 rows, it´s again 1 row menu.

But menu is not centered 🙁 Its closer to the right and when I change the size of the browser Search box hides the closest menu items. You can take a look.

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

#565005

You can try again with my tweak below:

Open custom.css file and add new rule


.t3-megamenu .level0 {
text-align: center;
}

.t3-megamenu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li .separator {
text-align: left;
}


[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#565044

Thank you, Ninja Lead. It didn’t help. I put the code above and it looks in a similar way. You can look on the page or look here on screenshot:

It’s still shift more to the right then exactly in the middle and in some point (as you can see on the pict) is menu divided to two rows even there is still enough place to move an stay on the one row.

---

Attachments:

1. 

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

#565150

I just fixed that bug directly on your site, please help me check it again and you can see it from custom.css file


.t3-navbar.navbar-collapse.collapse {
padding-right: 200px;
text-align: center;
}

.navbar-nav {float: none;}

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

.t3-megamenu .level0 {
text-align: center;
}

.t3-megamenu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li a, .t3-megamenu .dropdown-menu .mega-nav > li .separator {
text-align: left;
}
@media (min-width: 768px) and (max-width: 1024px) {
.head-search .form-control {
width:100px;
}
}
@media (min-width: 1400px) {
.t3-navbar.navbar-collapse.collapse {
padding-right: 0px;
}
}


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

1. karca

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#565179

Thank you, Ninja Lead. It works and is great 🙂

[Author]

Posts