[Resolved] Centring secondary menu on mobile and making main mobile menu non transparent

[Olga]

Hello,

I have used the advice to disable secondary menu collapsing in mobile. It is not collapsing anymore, but instead of being centred its left justified (even though the css tells it to centre) and stacked, I just want to fit it into one line.

While I am here, how do I make my primary mobile menu non transparent? its hard to see white words above light content

Olga

[Leo]

Hi there,

Can you provide a link to your site so we can take a look? Thanks!

[Olga]

Sure, its cobbletales.com

[Leo]

Can you try replacing this block of code that you’ve added:

.secondary-navigation .sf-menu>li {
    float: none;
    display: inline-block !important;
}

To this:

.secondary-navigation .inside-navigation .main-nav .sf-menu>li {
    float: none;
    display: inline-block !important;
}

Let me know.

[Olga]

Nothing, actually – even if I delete that part, it does not affect the appearance

[Leo]

I still only see the old code being added and not replaced by the new one.

Are you using a caching plugin?

[Olga]

Try now, I may have tried it and not saved. I am not sure what cashing plugin is so probably not.

[Leo]

Yup looks like it’s working for me: https://s21.postimg.org/msis0bpp3/2017-05-24_0836.png

Try clearing browser cache.

[Olga]

Thank you, it does! I hope its ok to ask another question:
how do I make my primary mobile menu non transparent (after the hamburger is pushed)? its hard to see white words above light content.
I also would like to have the titles closer together so the whole menu would fit vertically on a screen, and have lines between titles for clarity. How do I achieve that. It feels like there are options that I am not aware of…

Olga

[Leo]

This should work for mobile menu color:

@media (max-width: 768px) {
    .main-navigation {
        background-color: #000000;
    }
}

The newest version of GP premium should have a height option for the mobile menu.
It’s in Customizer > Layout > Primary Navigation > Menu Item Height and click the mobile icon.

[Olga]

Works, thank you! We are almost there: could you have a look at the footer widget 3? says social icons…
My feeling is something is not right with the lightweight social icons plugin because it does not save the icons! I would not ask this here, but since you guys work on that plugin, perhaps you can help?
this widget always gets thrown after a major update, the others stay in place…

[Leo]

So when you click save in Lightweight Social Icons widget window nothing happens?

[Olga]

exactly, I reopen the widget to find no icons there. May it have something to do with the fact that it is not tested on the current WP?

[Leo]

Don’t think so. Just tested and it works for me.

Can you make sure a link is inserted along with the icon? If the link field is empty then the icon won’t be saved.

If not then can you try #1 on this page quickly?
https://docs.generatepress.com/article/debugging-tips/

[Olga]

Problem is, there is no link field to the right of the icon choice. Where do I enter the url?

[Author]

Posts