[Resolved] Delete icon menu mobile

[Matthieu]

Hello, I would like to remove the menu icon on mobile, is this possible ?

Thanks

[Leo]

Hi there,

Try this CSS:

.menu-toggle .gp-icon {
    display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Matthieu]

It works thanks !

I added social network icons via the Block – Hook element
generate_menu_bar_items. Is it possible to have the icons of social networks on the left of the page, keep the site logo in the center and the basket on the right ?

Thanks

[Elvin]

Is it possible to have the icons of social networks on the left of the page, keep the site logo in the center and the basket on the right ?

Definitely possible:

Try this CSS:

nav#site-navigation, .menu-bar-items  {
    width: 100%;
}

span.menu-bar-item.wc-menu-item {
    order: 2;
    margin-left: auto;
    margin-right: 20px;
}

[Matthieu]

Perfect thanks ! Is there a solution to have a different layout on mobile ?

[Elvin]

Perfect thanks ! Is there a solution to have a different layout on mobile ?

You can set different settings for mobile by using @media (max-width:768px) rule.

Example:

/* desktop and tablet */
.your-selector  {
    [add your style for desktop here]
}
/* mobile */
@media (max-width:768px){
.your-selector  {
    add your style for mobile here]
}
}

[Matthieu]

The problem is that I wouldn’t know what to put to change this… 😅 Could you maybe help me?

If you reduce my page to mobile size : https://www.mmgraphik.com/ , you will see that the site logo is on the top left and the social media icons and the cart below on the same line.

I would like to know if it was possible to align the cart icons on the same line as the logo and leave the social media icons on the line below.

Thanks 😃

[Elvin]

I would like to know if it was possible to align the cart icons on the same line as the logo and leave the social media icons on the line below.

100% possible, but we may have to reduce the sizes or paddings of a few things so they fit in 1 row. 🙂

Try this CSS:

@media (max-width: 768px){
nav#mobile-header .navigation-branding .main-title {
    transform: translate(-50%, -50%);
}
nav#mobile-header .navigation-branding {
    position: absolute;
    top: 50%;
    left: 50%;
}
nav#mobile-header .inside-navigation.grid-container.grid-parent {
    position: relative;
}
nav#mobile-header a.gb-button {
    padding: 10px !important;
}
}

[Matthieu]

Wow this is great ! Thank you so much ! 😁

[Matthieu]

It’s perfect ! Thanks again

[Elvin]

It’s perfect ! Thanks again

No problem. Glad to be of any help. 🙂

[Author]

Posts