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!
22 REPLIES 22
Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

can you give the url of your website.

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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.

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

It is now disabled. 😊

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

Screenshot_20180913-085332.png

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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.

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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.

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

 

Screenshot_20180913-102039.png

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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.

Highlighted

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

 

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

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

Sorry, This should defenitly work. Please try this

 

@Media (max-width: 600px){

#menu-main-navigation-1{

margin: auto;
width: 60%;

}

}

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

 
Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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.

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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. 

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

.footer-menu{

margin: auto;
width: 100%;

}

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

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

Removed @Media aand still nothing. 🙁

Helper IV
Helper IV
Solution

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

.footer-menu{

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

}

Helper IV
Helper IV
Solution

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

Please try that.

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

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

Helper IV
Helper IV

Re: Center aligning Footer navigation in Velux Godaddy (mobile)

Thank you for following all my steps. Cheers...