Archived topic

Off Canvas Menu drop down arrow makes menu-text go off-center

3 replies · Started by Lars on April 22, 2020

Viewing posts 1–4 of 4

April 22, 2020 at 2:39 am #1248941

Hello

I am working with the Off Canvas Menu and want the small arrow on the right (the one that links to the drop down menu) not to make the text-item in the menu go off-center. I feel sure that it is possible to make it behave like it’s not there in terms of being an element in relation to other elements, but still being visible and clickable. CSS for this?

Link to page for admins and image of what I mean here.

Thanks for any help

April 22, 2020 at 3:26 am #1248997

Hi there,

try this CSS:

.slideout-navigation.main-navigation .main-nav ul li a {
    position: relative;
}
.slideout-navigation.main-navigation .main-nav ul li a .dropdown-menu-toggle {
    position: absolute;
    right: 0
}

April 22, 2020 at 11:00 am #1249650

Excellent! Just like that. And if I want to have the text to the left, instead of the center?

April 22, 2020 at 3:40 pm #1250013

Then just remove this existing CSS:

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
    text-align: center;
}

This archived topic is closed to new replies.

Start building better websites today.