[Simon TParticipant]

Hi Paul, that worked – but they don’t quite seem centre.

Also is there a way to set them say 75% down the navbar rather than right below the Navbar links?

Sorry to be a pain – I have a very picky client

[RupokMember]

Hi there,

Seem we posted two different solution at a time. Did you try my earlier solution? You can change the values to adjust more if needed (for both of the solutions).

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Simon TParticipant]

Hey guys,

Sorry to bring this thread up again, but I’ve now moved the website from my dev server to live server so the menu item IDs have changed. Could someone let me know where I can find the menu item numbers so I can update the code below?

.x-navbar .desktop .x-nav > li.menu-item-270 > a > span,
.x-navbar .desktop .x-nav > li.menu-item-271 > a > span,
.x-navbar .desktop .x-nav > li.menu-item-272 > a > span,
.x-navbar .desktop .x-nav > li.x-menu-item-search > a > span {
border:0;
width:auto;
font-size:25px;
}

.x-navbar .desktop .x-nav > li.menu-item-270,
.x-navbar .desktop .x-nav > li.menu-item-271,
.x-navbar .desktop .x-nav > li.menu-item-272,
.x-navbar .desktop .x-nav > li.x-menu-item-search {
display:inline-block;
}

.x-navbar #menu-sporting-edge {
text-align:center;
}

[Simon TParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for the updates! You can simply update the custom css by updating the menu item ID. To find the menu item ID, please right click on the page on your site and select “inspect element” and scroll down until you find code like this.

You can also go to Appearance > Menus and hover your mouse pointer over the Remove or Cancel link for each menu item.<br>

Hope this helps. Please let us know how it goes.

[Simon TParticipant]

Awesome, that worked. Thanks!!!

[Paul RModerator]

You’re welcome!

[Simon TParticipant]

Hey guys, just wondering if its possible to have the same effect on mobiles/tablets? Currently the social icons are still in boxes like the rest of the social icons. Website is live now: http://sportingedge.co.nz/

[Paul RModerator]

Hi,

Yes, it’s possible.

You can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar .mobile .x-nav li.menu-item-270>a,
.x-navbar .mobile .x-nav li.menu-item-271>a,
.x-navbar .mobile .x-nav li.menu-item-272>a {
   border:0;
}

.x-navbar .mobile .x-nav li.menu-item-270,
.x-navbar .mobile .x-nav li.menu-item-271,
.x-navbar .mobile .x-nav li.menu-item-272 {
    display:inline-block;
}

.x-navbar .mobile .x-nav {
    text-align: center;
}

.x-navbar .mobile .x-nav li>a {
    text-align: left;
}

Hope that helps.

[Author]

Posts