Docs

[Andrei]

Hello,

I would like to make the footer menu look somehow like in the first attachment (I would like the social media icons and every menu to be on a different row, centered. The second attachment is my website, how it looks on mobile right now.

The link to my website is: //sinestezic.com

Thank you!

[Andrei]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

#menu-footer-menu li {
    float: none !important;
    width: 100% !important;
}

Let us know how this goes!

[Andrei]

I would like the page to stay the same on desktop and laptop screens and to have the change only on mobile devices.

This is what I am looking for on mobile devices except that I would like the social icons to be on the same row and the menu to remain transparent.

The first image is what I want on desktop and laptop and the second image is what I have right now, with the change you recommended.

Thank you very much for your help.

[Rahul]

Hey Andrei!

Thanks for writing in!

Try this custom CSS which is prepared for small screens:

Add it to : Appearance > Customize > Custom > CSS

@media (max-width: 767px){
 .textwidget .x-column.x-1-4 {
   float: left;
   width: 48%;
   margin-right: 2%;
 }

 .textwidget .x-column.x-1-4:nth-child(2n+1){
     clear: both;
 }

 .textwidget .x-column.x-1-4:nth-child(2n) {
     margin-right: 0;
 }
}

Let us know how it goes!

[Andrei]

Hi Rahul,

Sorry, but it doesn’t work. I attached a printscreen of the result.

Thank you.

[Rupok]

Hi there,

Thanks for writing back. In that case you should change your layout to a better arrangement because you are just using the same menu to place the menu links and icons altogether and using float: right; to move the icons to right. Certainly it’s not a good practice. You can create two different div/menu and place them separately. Then it will be easier to float them left and right and stack them in mobile.

Hope this makes sense.

[Andrei]

Hi,

I created a different div menu (#footer-menu-2). Can you please advise me now? Thank you, you are doing a great job. Thank you for your patience.

[Christopher]

Hi there,

Please try this:

@media (max-width:767px){
#menu-footer-menu li {
    float: none !important;
    width: 100%;
}
.custom-footer-menu-right {
    float: none !important;
    text-align: center;
    display: inline-block;
}
}

Hope it helps.

[Andrei]

Thank you, it works, but now I have the following issues:

1. On mobile, the footer menu is not 100% transparent and also a weird bar appeared on the right of the screen;
2. On desktop, the slider is bigger than the screen and a bar appeared on the right of the screen.

Thanks

[Andrei]

I solved the issue with the transparency but there is still an issue with the right bar and the slider bigger than the screen.

[Andrei]

The issue with the bar is solved too. Thank you very much!

[Christopher]

You’re most welcome.

[Author]

Posts