cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution

Center aligning Footer navigation in Velux Godaddy (mobile)

Hello, I am trying to center align the navigation menu for mobile users in my website's Footer. I am using the Godaddy theme "Velux," a primer child theme. Is there a simple CSS fix I am missing? Thank you!
2 ACCEPTED SOLUTIONS

I think this might work. It forces the custom css to take higher privilage

.footer-menu{

margin: auto !important;
width: 100% !important;

}

View solution in original post

22 REPLIES 22
Helper IV

can you give the url of your website.

The URL is allpogo.com, but I am currently running a "maintence mode" plug in. I'll disable it right now temporarily. Thanks!

Thank you. please let me know when you disabled it. Or else give me the screenshot of your footer, Instead of disabling cooming soon mode.

It is now disabled. 😊

Screenshot_20180913-085332.png

Try adding custom css in customizer>custom CSS

 

@Mediaonly screen and (max-width: 600px){

.menu-main-navigation-1{

margin: auto;
width: 60%;

}

}

 

Please let me know the result.

I was given an error when entering that CSS. Is that for them Footer nav only  Thank you!! 

menu-main-navigation-1 is the class name of footer menu. Shall i know in detail about the error. Shall i see the screenshot of the error.

 

I want to remind you that you should not enter <style> & </style> in custom css.

Of course, attached is a Screenshot of my current CSS screen. Thanks.

 

Screenshot_20180913-102039.png

I cannot see the screen shot.

 

And a small correction

@media (max-width: 600px){

#menu-main-navigation-1{

margin: auto;
width: 60%;

}

}

 

above has two corrections,

1. To remove error only use @Media 

2. I have replaced . with # because it is id name and not class name.

 

 

If you use the above code it should defenitly work

 

sorry for my mistake.

Oops, sorry about that  Try this. https://imgur.com/a/JkO7YBX

 

 Edit :just changed to @mediaonly aND it's still off center  😕

Sorry, This should defenitly work. Please try this

 

@Media (max-width: 600px){

#menu-main-navigation-1{

margin: auto;
width: 60%;

}

}

Almost there, that seems to center aligned them but they still are off center in the whole frame  Hard to explain, but I'll attach a Screenshot  https://imgur.com/a/z2XT9vu

 

I tried different things and found solution.

Try this,

@media (max-width: 600px){

.footer-menu{

margin: auto;
width: 100%;

}

}

 

If your problem solved mark this as solved and give me a kudo, If you found it useful.

I put that CSS in exactly how you posted but it's still off center. I'm beginning to believe it's eternally stuck left-justified  Hahaha. Eithr way  I appreciate you taking all this time to help. 

.footer-menu{

margin: auto;
width: 100%;

}

can you remove @Media and if it looks good, Let me know.

Removed @Media aand still nothing. 🙁

I think this might work. It forces the custom css to take higher privilage

.footer-menu{

margin: auto !important;
width: 100% !important;

}

View solution in original post

Yes! That did it! Thank you so much @MithunRaj I really appreciate it