[Simon TParticipant]

Hi Guys,

Can anyone tell me how to add a border around navbar links similar to the sample below:

http://prnt.sc/c03m5k

[Rue NelModerator]

Hello There,

Thanks for writing in! To add some borders in your menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a > span {
    padding: 5px 10px;
    border: solid #fff 1px;
}

http://prntscr.com/c03p4u

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

[Simon TParticipant]

Just what I was after, thanks. How do I set the boxes to be the same size as per the sample?

[NicoModerator]

Hi There,

You can add width to the boxes.

.x-navbar .desktop .x-nav > li > a > span{
    padding: 5px 10px;
    border: solid #fff 1px;
    width:130px;
    text-align: center;
}

Hope it helps.

Let us know how it goes.

Thanks.

[Simon TParticipant]

Thank you, worked a treat!Two further questions:

1.) Now that I have added this CSS, my submenus don’t appear. Please see http://77.104.142.77/~webstein/sportingedge.co.nz/hockey/

2.) I’ve also added the code below to remove the orange line underneath navbar links – but they won’t go away?

.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > li.current-menu-item > a {
box-shadow: none;
}

[ChristopherModerator]

Hi there,

Please add this code :

.x-navbar {
    min-width: 295px;
   overflow-y: hidden; 
}
.x-navbar .desktop .x-nav > li > a {
    padding-top: 4px;
    padding-bottom: 4px;
}
.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}

If all submenus don’t display, please reduce navbar font size.

Hope it helps.

[Simon TParticipant]

Thanks, that removed the line under the links – but the Submenus still don’t display.

Works fine on mobile but not on desktop.

I have tried reducing the navbar font size

[ChristopherModerator]

Sorry, it didn’t help.
Please update it to :

.x-navbar {
    overflow-y: visible;
}

Hope it helps.

[Simon TParticipant]

Perfect, that worked…

Sorry one more question, please refer to this thread: https://community.theme.co/forums/topic/adding-social-icons-to-side-menu/

I too want to have my social icons at the bottom of the left aligned Navbar. I have added the navbar.php file to x-child/framework/views/global but nothing has changed?

[FriechModerator]

Hi There,

You can achieve that by adding the <i class="x-icon x-icon-heart" data-x-icon="&#xf095;" ></i> tag on Navigation Label.

In that case you need the icon unicode to supply on the data-x-icon attribute. Look for desired icon unicode here.

Hope it helps, Cheers!

[Simon TParticipant]

Hi Guys,

Thanks for the suggestion, but when I did it – only the phone icon would appear (even if I changed the name of the icon). Any other suggestions?

You’ll also notice I have borders around the navbar items – I don’t want the border around these social links, I would prefer to have them further down the Navbar. Is this possible?

[JoaoModerator]

Hi There,

You need to change the whole code not just the name of the icon, you can find the correct code by inspecting the icons with your right mouse button on this page.

http://demo.theme.co/integrity-1/shortcodes/icons/

If you dont know how to do that please let us know which icons you are looking for.

Regarding the border, once you have placed the icons, please contact us and we will provide you the code to remove the border from the social icons.

Hope it helps

Joao

[Simon TParticipant]

Thanks Joao!

I’ve added the logos, now I just want to remove the borders, make them bigger, and send them towards the bottom of the navbar.

[RupokMember]

Hi there,

You can try this :

.menu-item.menu-item-type-custom.menu-item-object-custom, .x-menu-item-search {
  float: left !important;
  margin-top: 75%;
  width: 50px;
}

.menu-item.menu-item-type-custom.menu-item-object-custom a span, .x-menu-item-search a span {
  border: medium none !important;
  font-size: 24px;
  width: 140px !important;
}

Hope this helps.

[Paul RModerator]

Hi Simon,

You can try adding this under Custom > CSS in the Customizer.

.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;
}

Hope that helps.

[Author]

Posts