[asiya1]

Hi,

I used a custom code to edit the menu bar to space the items on it (http://gavinjoejones.com/) but this looks odd on mobile view, with the large gaps after each item. Do you know a custom CSS I could use to make it right?

[Skandha]

@asiya1: I just checked your site and the menu looks fine on mobile view. Please try clearing your browser cache. This might solve the issue. Also please send me a screenshot of the mobile menu if the issue persists.

Regards,
Skandha

[asiya1]

Hey, cleared cache but it still looks off. The menu list has a massive space after each item. Find my screenshot below.

How do you think I can work around it?

[asiya1]

https://drive.google.com/file/d/1dFXxsO59ISGTw8SPHw0mb9gZeBWEa2-h/view?usp=drivesdk
Sorry here’s the link to the screenshot

[Skandha]

@asiya1: Do you mean to align the menu items to the center? If yes,
Go to => Appearance => Customize => Additional CSS and remove the additional CSS.

.menu-item {
    width: 24.5%;
}

Let me know if this is what you want.
Regards,
Skandha

[asiya1]

No, I mean to remove the space on the right of the menu items that make the drop-down stretch out.

[asiya1]

So, I wanted to space out the menu items and used a custom code to space it out. When I did that, it even affected the mobile view where the space is seen on the right of the menu items on mobile. What code do I use to make it normal and aligned centre, without the space?

[Skandha]

@asiya1: Remove the CSS you have added previously and
Go to = Appearance => Customize => Additional CSS and add the following CSS Code.

#site-header-menu {
    width:50%;
}

Let me know if this works out.
Regards,
Skandha

[Author]

Posts