[Resolved] Navigation menu and slideout menu

[Bernhard]

I would like to make the menu a little nicer.

Desktop menu and mobile menu:
1. I would like to separate the menu items with a line with a colour to define

Mobile slideout menu:
2. I want to define the width of the slideout menu (50% or 60%) – actually it seems to be hardcoded in number of pixels
3. I want to be able to define colour and transparency in the area not covered by the menu (actually it seems to be something like 80% black). It would also be nice to be able to configure the transparency of the menu background
4. I would like to have an indent of the submenu items in the slideout navigation

Thank you for your help

[Leo]

Hi there,

1. For desktop:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li a {
        border-right: 1px solid #fff;
    }
}

For mobile:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        border-bottom: 1px solid #fff;
    }
}

2. Try this:

.main-navigation.offside {
    width: 50%;
}

3. Try this:

.slideout-overlay {
    background-color: #fff;
}

4. Try this:

@media (max-width: 768px) {
    .main-navigation .main-nav ul ul li a {
        padding-left: 30px;
    }
}

All code above are CSS.

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

[Bernhard]

Great, most of your suggestions work as expected. I’m really happy with the results.
The only thing is with the indent in the slideout meny, code

@media (max-width: 768px) {
    .main-navigation .main-nav ul ul li a {
        padding-left: 15px;
    }
}

This moved the submenu items to the left. They shall be moved to the right. Can you please suggest how to adjust this.

One more thing: To format dashicons on the correct line height, I found in your support board the code

.menu-item .dashicons {
    display: inline;
    font-size: inherit;
    height: auto;
    width: auto;
    line-height: inherit;
    padding-top: 2px;
}

and it works so far. The only problem is, on desktop, that in the line below the dashicon, the menu items are shifted to the right of the dashicon.

[Leo]

Currently don’t see the menu items in the slideout nav:
https://www.screencast.com/t/pcerex8sSFl

Can you make it show first so I can see?
https://docs.generatepress.com/article/activating-slide-out-navigation/#empty-slideout-navigation

What dashicons are you referring to?

Let me know 🙂

[Bernhard]

OK, I fixed the problem with the slideout menu. It was only assigned in German, but not in English and Italian. Thank you.
Another issue I found is that the menu does not show up in the mobile emulation in Chrome.
Beside this, in Chrome for Android and Safari I have the expected result, see screenshot. Only the indent is not yet implemented.
Referring to the desktop view, it works properly with Firefox and Edge. The problem is only with Chrome. Screenshot
The additional CCS code is for now

.menu-item .dashicons {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    padding-top: 2px;
}
.slideout-navigation .main-nav li {
    margin-bottom: 6px;
}
@media {
    .main-navigation .main-nav ul li a {
        border-bottom: rgba(349, 81, 57, 0.3) 1px solid;
    }
}
.main-navigation.offside {
    width: 200px;
}
.slideout-overlay {
    background-color: rgba(349, 81, 57, 0.1);
}

Thank you for your help.

[Leo]

Wouldn’t worry about the emulator.

I only see this CSS added:

@media (max-width: 768px) {
    .main-navigation .main-nav ul ul li a {
        padding-left: 20px;
        padding-right: 20px;
    }
}

And that’s not what I provided in #4 here: https://generatepress.com/forums/topic/navigation-menu-and-slideout-menu/#post-765416

Can you also disable the caching plugin while we are working on this?

[Bernhard]

Hi Leo,
I don’t know where this CSS comes from. This is the full code of additional CSS:

/* Blocksatz */
.entry-content p
	{text-align: justify;}
/* Line break before title */
h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both}
@media (max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}
.generate-back-to-top,
.generate-back-to-top:visited {
    border-radius: 25px; /* how round the button is */
    line-height: 50px; /* how tall it is */
    width: 50px; /* how wide it is */
}
.generate-back-to-top {
    font-size: 30px;
    background: #931b31;
    color: #ffc233;
}
.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background: #F6B432;
    color: #FFFFFF;
}
.menu-item .dashicons {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    padding-top: 2px;
}
.slideout-navigation .main-nav li {
    margin-bottom: 6px;
}
@media {
    .main-navigation .main-nav ul li a {
        border-bottom: rgba(349, 81, 57, 0.3) 1px solid;
    }
}
.main-navigation.offside {
    width: 200px;
}
.slideout-overlay {
    background-color: rgba(349, 81, 57, 0.1);
}

I use WP Fastest Cache, Autoptimize and Clearfy. Is there something that may mix up the code?

I tested #4 but it shifted the submenu items to the left.

To disable the cache plugin, this is actually only possible between 3pm and 9pm your local time. Let me know, which one to disable (WP Fastest Cache, Autoptimize, Clearfy) and when.

[Leo]

I need all caching plugins disabled to see the source of the code.

Not sure why it’s only possible during those time? Your site will continue to work without those plugins.

[Bernhard]

Actually I have some traffic peaks and my system is too slow without cache.

[Bernhard]

Clearfy, Autoptimize and WP Fastest Cache are disabled now.

[Leo]

Edited the CSS in #4 here: https://generatepress.com/forums/topic/navigation-menu-and-slideout-menu/#post-765416

[Bernhard]

Perfect, thank you.

[Leo]

No problem 🙂

[Author]

Posts