[Resolved] Amazinf menu in the footer e-commerce

[Jose]

Hi, do you think is possible to create a menu in the footer for an e-commerce (mobile version) of the following web:

https://serrinultramarinos.com/

In mobile devices!!

[David]

Hi there,

you could create the ‘menu bar’ using the Block Element:

https://docs.generatepress.com/article/block-element-overview/

And the Generate Blocks plugin to create a Container Block with a row of Buttons:

https://wordpress.org/plugins/generateblocks/

In the Block Element you would choose the Hook > generate_after_footer

If you give the Container Block > Setting > Advanced > Additional CSS of:

hide-on-desktop mobile-navigation

Then add this CSS to fix it to the bottom of the browser:

@media(max-width: 769px) {
    .mobile-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10000;
    }
    body {
        margin-bottom: 80px; /* change this value to height of mobile nav */
    }
}

[Jose]

I don’t know hot to do:

If you give the Container Block > Setting > Advanced > Additional CSS of:

[Jose]

Okey, I Have done.

Will be possible to add some image/icon in the buttons and change the color?

Regards,

[Jose]

I want to add to a white background!

[David]

Each of the GB Blocks has full styling controls.
This documentation provides an overview of each of them:

https://docs.generateblocks.com

[Jose]

Thanks!

I have changued things, but I want to make it less high, like the half, how cani i do that? with css

[Leo]

Can you link us to the page in question so we can see what you have currently?

[Jose]

Yes, here you have!

https://corteastur.es/

[Leo]

Sorry which page and section should I be looking at?

Everything on the page in linked except header, navigation and page hero is coming from Elementor.

[Jose]

Hi!

It is in the mobile footer. I have created it with your blocks!

I want to delete the button Martin and reduce de top margin.

Regards,

[Leo]

Try reducing the 40px padding added in the container block first:
https://www.screencast.com/t/jEfZlPwZBszR

[Jose]

The case is that in mi CSS code there isn’t that padding

[Jose]

ok, done.

Regards!!!

[Leo]

Not sure why you need to write CSS for that as those are options:
https://docs.generateblocks.com/article/container-overview/#spacing

[Author]

Posts