Joomla Templates Club 406,261 posts

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#705592

Hello.

I would like to center my nav bar above my centered logo. I can’t seem to do this properly without affecting the footer logo and mobile layout.

Can you please help?

This is what it currently looks like….

This is what I want it to look like…

Thank you!
An 🙂

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

#705828

Hi,

You can try with this tweak:

Open templates/ja_cagox/css/custom.css file and add new rule

@media (min-width: 1200px) {
#t3-header .t3-mainnav {
float: right !important;
width: 70% !important;
margin: auto !important;
}

#t3-header .logo {
width: 100% !important;
}

#t3-header .head-right {
position: absolute !important;
right: 0px !important;
}
}


Regards

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

#752140

Hi,

You can try with this tweak:

Open templates/ja_cagox/css/custom.css file and add new rule

@media (min-width: 1200px) {
#t3-header .t3-mainnav {
float: right !important;
width: 70% !important;
margin: auto !important;
}

#t3-header .logo {
width: 100% !important;
}

#t3-header .head-right {
position: absolute !important;
right: 0px !important;
}
}


Regards

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#706079

Thank you for your quick response!

This css works for the homepage but doesn’t center nav in the supporting pages and the smaller layouts when the menu converts to lines.

Please see attachments:

My website is sageetcie.com/shop

Your help is very much appreciated!

Thanks!
An 🙂

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#752296

Thank you for your quick response!

This css works for the homepage but doesn’t center nav in the supporting pages and the smaller layouts when the menu converts to lines.

Please see attachments:

My website is sageetcie.com/shop

Your help is very much appreciated!

Thanks!
An 🙂

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

#706166

I added the css style below into templates/ja_cagox/css/custom.css file on your site.


.default-page .t3-footer > .container {
padding-left: 50px;
padding-right: 50px;
}
@media (max-width: 767px) {
#t3-header .logo {
width: 100%;
}

#t3-header .head-right {
position: absolute !important;
right: 0px !important;
}
}


Now, you can see it’s working fine other pages and mobile layout.

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

#752380

I added the css style below into templates/ja_cagox/css/custom.css file on your site.


.default-page .t3-footer > .container {
padding-left: 50px;
padding-right: 50px;
}
@media (max-width: 767px) {
#t3-header .logo {
width: 100%;
}

#t3-header .head-right {
position: absolute !important;
right: 0px !important;
}
}


Now, you can see it’s working fine other pages and mobile layout.

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#706333

Hello and thank you again!

That code fixed it but another problem popped up. Now the “Contact Us” menu item isn’t working. It’s as if it’s just text and not a link.

This is only a problem on the computer version, not the mobile layout.

Please help again!

Thank you!
An 🙂

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#752439

Hello and thank you again!

That code fixed it but another problem popped up. Now the “Contact Us” menu item isn’t working. It’s as if it’s just text and not a link.

This is only a problem on the computer version, not the mobile layout.

Please help again!

Thank you!
An 🙂

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

#706347

I set width in custom.css file and you can see the detail it from my screenshot

Now, the problem on your site is fixed.

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

1. An LeFevre

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

#752453

I set width in custom.css file and you can see the detail it from my screenshot

Now, the problem on your site is fixed.

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

1. An LeFevre

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#719030

Yes, it is fixed. Thank you!

[An LeFevre Friend An LeFevreJoin date: September 2014Posts: 48Downloads:57Uploads:2 Thanks: 8]

#752867

Yes, it is fixed. Thank you!

[Author]

Posts