Site logo

Archived topic

Sticky Menu - menu links are not reflected as per header

11 replies · Started by Ashley on September 2, 2021

Viewing posts 1–12 of 12

Hi,

Good day to you. I have created a sticky menu for this site: https://embroidery.com.sg/blog/.

However, the menu links appears different from the non-sticky header. Also, the site logo doesn't seem to be centralise. Hope you can assist. Many thanks in advance.

Hi there,

That's because the sticky navigation seems to be using a menu named "Complete menu" on Appearance > Menus.

And this menu seems to only have 5 items. (Home is missing)

Add a "Home menu" item so it looks similar to the menu done on the static nav bar. (menu left which has 3, menu right which has 3 as well)

As for the logo alignment, can you try adding this CSS?

#sticky-navigation .navigation-branding img.is-logo-image {
    position: static;
}

That’s because the sticky navigation seems to be using a menu named “Complete menu” on Appearance > Menus.

The sticky navigation seems to be using the mobile version of the menu. Is there a way to chose which Menu I can use for the sticky navigation?

The sticky menu uses what's assigned to the Primary menu location. It shares the used menu with the default navigation bar of the theme. (and mobile header if you're not using Off-canvas navigation)

https://share.getcloudapp.com/DOuBmOZ7

Noted. I have added a Home link to the Menu. May I know how to adjust the left and right spacing of the logo?
I would like to make it look like this.https://snipboard.io/nOKF81.jpg

Hi Ashley,

Give this CSS a try:

.menu-right-menu-container {
    padding-left: 20px;
}

aside#nav_menu-2 {
    padding-right: 20px;
}

Feel free to adjust the values.

Hi Ying, thanks for the response. However, the spacing still remains the same after I applied the CSS given. I have adjusted the value and it's not reflected.

Hi, not really... I am trying to control the spacing between the logo and the menu link. The logo should be closer to the menu link and not so spaced out.

Hi, not really… I am trying to control the spacing between the logo and the menu link. The logo should be closer to the menu link and not so spaced out.

To clarify: You're trying to resize the logo so it looks closer to the links?

Or perhaps, you're trying to move the menu items closer to the center so it's closer to the logo?

Or perhaps, you’re trying to move the menu items closer to the center so it’s closer to the logo?

Yes, that is what I want to achieve.

As it is, (on the /blog page)

The way to go is by removing the padding and margin added through custom CSS.

The site has lots of custom CSS added to the left nav widget and right nav widget.

These are a few things that adds the spacing -

aside#nav_menu-2 {
    padding-right: 10px;
}

.header-widget .widget_nav_menu#nav_menu-3 .menu-right-menu-container {
    margin: 3px 0px 0px 14px;
}
.header-widget .widget_nav_menu#nav_menu-2 .menu-left-menu-container {
    margin: 3px 14px 0px 0px;
}
This archived topic is closed to new replies.