[Resolved] Customize main menu icons in mobile

[Pedro Chincoa]

Hi there!

How can I customize the colors and position (I want them to be horizontal) of the main menu icons in mobile?
I’ve tried with menu-item-float-right.

The thing is that I want the desktop-centric menu and that the WPML selector was also well aligned in Mobile.

In vertical breaks all the design..

Thank you!

[Leo]

Hi there,

Your site is in maintenance mode so I can’t see it.

Have you tried the mobile header feature? https://docs.generatepress.com/article/mobile-header/

[Pedro Chincoa]

Hi Leo,

Sorry, my website is not in maintenance. You can click on several links and see the problem in mobile.

I do not want to use the header on the site. Only modify the color of the main menu on the mobile and see the items horizontally, as in the desktop option

I have added the following CSS code:

@media (max-width: 768px) {

.primary-navigation .main-nav ul ul li a {
color: #fff;

}
.generate-combined-header .main-navigation.toggled {
background-color: transparent;
}

#generate-slideout-menu li.menu-item-float-right {
display: inline-block !important;
}
}

I still can not change the color and above all I can not put the icons in horizontal line
Can you help me please?
Thanks

[Leo]

This is what I currently see on mobile: https://s33.postimg.org/dea91tybj/2017-11-14_0822.png

I’m still not quite sure what you are after? I don’t see any icons?

[Pedro Chincoa]

I mean the first page, in which there is a page header with a photo and particles. The capture that you have passed to me is from the “multimedia” page.

Click here, please: http://pedrochincoa.com/

[Leo]

Ahh I see.

So basically you don’t want the menu to be responsive on that page?

What about the other pages?

[Pedro Chincoa]

Oh, finally!

What I want is to have the menu (icons) responsive, of course, but horizontally, only on that page. On the other pages I combine the top bar and the secondary navigation
Can you see the icons vertically? true? They look so bad
That’s just what I need, change position and color in mobile

…Thanks

[Leo]

Do you still want the toggle though?

[Pedro Chincoa]

I prefer without toggle though.

Just like it is in desktop: horizontal, white color and in hover {color: #2c3840;
background: #fff;}

Con you help me or not? Sorry but I think I’ve written the same thing many times.

Thanks

[Leo]

That’s what I’ve been trying to do. Your explanation wasn’t clear to me.

Try this solution and the CSS the user mentioned below: https://generatepress.com/forums/topic/menu-item-visible-on-mobile/#post-422745

[Pedro Chincoa]

Excuse me if I was not clear. My English is terrible
  But I also tell you that you took 4 messages to recognize the page.

Nothing happens with that CSS 🙁

[Leo]

Right because of the language barrier like you said 🙂

Did you add the snippet that Tom provided which I linked?

[Pedro Chincoa]

Yes, I added the snippet. And it does not work!!

[Leo]

Just to double check (As it worked for the other users and I just tested it works as well).

This is added:

add_action( 'wp_enqueue_scripts', 'generate_dequeue_mobile', 100 );
function generate_dequeue_mobile() {
   wp_dequeue_style( 'generate-mobile-style' );
}

Using one of these methods: https://docs.generatepress.com/article/adding-php/

[Pedro Chincoa]

Hi Leo,

It’s weird . Because it only works when I’m logged in! If I close WordPress session, it does not work.

Do you know why this happens? Thanks

[Author]

Posts