[AndcomParticipant]

Hi, how can i create a menu that look like the attached.

I need the color adding to the background (and the title to be boxed in), and advise how I can insert a different link / larger flag in to replace the tiny flag ones from wmpl.

Thanks, url: http://www.anwweb.com

[John EzraMember]

Hi there,

Thanks for writing in! To get the borders, you can use CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar .desktop .x-nav li a {
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
    padding-bottom:35px;
}

.x-navbar .desktop .x-nav li:first-child a {
    border-left: 4px solid #000;
}

.x-navbar .desktop .x-nav li:last-child a {
    border-left: 4px solid #000;
}

li.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce {
    margin: 0;
}

li.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce a {
     padding-bottom:56px;
}

Regarding the menu items, you can add the home symbol in the menu by using HTML instead of text. The Label for the menu accepts HTML.

use this for the home icon:

<i class="x-icon x-icon-home" data-x-icon="" aria-hidden="true"></i>

For the rest of the menus and colors, it would be best if you had all the menu items created so we can target them specifically for the colors.

Do update us when ready – thanks!

Hope this helps – thanks!

[AndcomParticipant]

Thanks, have done the icon, so I have created the pages as requested, and got the border to as close to.

What i actually want to create is less powerful than the original example. So I would like to make the bottom & top borders to run all the way across the page.

Then add those colours in as mentioned to each menu item.

Attached. Thanks again.

[RupokMember]

Hi there,

Thanks for clarifying with screenshot. Kindly use this CSS :

.x-navbar {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  padding-bottom: 3px;
}

And then remove the previous code for the border :

.x-navbar .desktop .x-nav li a {
  border-bottom: 2px solid #333333;
  border-top: 2px solid #333333;
  padding-bottom: 30px;
}

Hope this helps.

Cheers!

[AndcomParticipant]

That helps, I have worked out how to add color to the backgrounds as needed, I just can’t get them to space how I want. Is the nav bar limited to a certain % of the header area? If so is the anyway to make it go all the way across to the logo. I might even remove the wording (on the logo) and just have the logo part which I will want create move nav space.

Thank you.

[RupokMember]

Hi there,

Thanks for updating. Yes because there is a container inside the navbar and a max width is set to container from Customizer.

To increase this for Navbar only, you can add this under Custom > CSS in the Customizer.

.x-navbar-inner .x-container.max {
  max-width: 100%;
  width: 95%;
}

If you have other concern then kindly clarify properly with anothr screenshot.

Cheers!

[AndcomParticipant]

Thats good is stretched out further. But what I was asking is I want the nax bar to be full screen like the attached. The nav menu background to fill out but with a % not a px width style.

Thanks

[ZeshanMember]

Hi there,

It’s not easily possible to stretch the navbar items with percentage width to fill the complete navbar. It could be possible with in-depth CSS customization, but would be outside the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[AndcomParticipant]

Hmm in that case, I can use the @media command? and make them all 200px, than next @media 150px, etc. That would work right?

So using the above, my questions are what are is the size of the logo bar area? What I would like to create is as the attached.

Changes:

Make the logo show far over to the left and is possible to put the search box the other side of the shopping cart.

Please see attached.

[ChristianModerator]

Hey there,

What you want to achieve is technically possible however, that would require custom development which falls outside the scope of our support. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[AndcomParticipant]

I appreciate that. I have used the @media and broke down enough for now. I have made the icon’s font size 32px, but now they do not sit inline as such, could you just possibly advise what line I need to add, to make them sit higher up in their box.

TIA

.x-icon-home  {font-size: 32px;}
.x-icon-search {font-size: 32px;}
.menu-item-481 {background-color: white; border-left:1px solid #515151; text-align: center;}
.menu-item-351 {background-color: #EC1D24;text-align: center;}
.menu-item-321 {background-color: #F6AD35;text-align: center; }
.menu-item-331 {background-color: #38B349; text-align: center;}
.menu-item-341 {background-color: #5BBFDD;text-align: center;}
.menu-item-91 {background-color: white; border-right:1px solid #515151; text-align: center;}
.x-btn-navbar-search {text-align: center;}

.x-navbar .desktop .x-nav>li {
    float: center;
    width: 190px;
}
@media (max-width:1750px) and (min-width:1585px){.x-navbar .desktop .x-nav>li {
    float: center;
    width: 170px;
	}
}

@media (max-width:1584px) and (min-width:1362px){.x-navbar .desktop .x-nav>li {
    float: center;
    width: 140px;
	}
}

@media (max-width:1361px) and (min-width:1120px){.x-navbar .desktop .x-nav>li {
    float: center;
    width: 120px;
	}
}

@media (max-width:1199px) and (min-width:980px){ .x-navbar .desktop .x-nav>li {
    float: center;
    width: 95px;
	}
}

[RupokMember]

Hi there,

Thanks for updating. You can try using this :

.x-navbar .desktop .x-nav > li > a i {
  margin-top: -10px;
}

Hope this helps.

Cheers!

[AndcomParticipant]

Indeed that does help.

Thank you 🙂 perfect (for now).

[John EzraMember]

You’re most welcome!

[Author]

Posts