Docs

[Andcom]

Hi,

Please help, my sub menu item’s are opening to the left and not fitting on the page. I removed the border, but have the following questions / problems as below:

1) How to make the sub menu items open to the right, not left so they fit on the page.

2) Remove the space between them and sit at the same height (under the nav menu)

3) Is there a simple way to make all the sub menu items background color the same as their top menu item, or do i need to specify each item’s color like i did the main nav menu backgrounds?

4) Is there a way to hover the whole box, not just the writing? It doesn’t have to change color like the text does, just add some transparency to it? (if that means I loose the changed color of the menu text, no problem)

5) Is there anyway to remove the highlight of the current item in the nav menu.

Thank you in advance.

url: http://www.anwweb.com

[John Ezra]

Hi there,

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

For #1 and #2, use this:

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    top: 0;
    left: calc(100%);
}

For #3 use this:

.x-navbar .menu-item-27 .sub-menu{
        background-color: #EC1D24!important;
    }
    .x-navbar .menu-item-24 .sub-menu {
        background-color: #F6AD35!important;
    }
    .x-navbar .menu-item-29 .sub-menu {
        background-color: #38B349!important;
    }
    .x-navbar .menu-item-30 .sub-menu {
        background-color: #5BBFDD!important;
    } 
}

For #4 use this:

.x-navbar .menu-item a:hover,
 .x-navbar .menu-item .sub-menu li a:hover{
     background-color: rgba(0, 0, 0, 0.5)!important;
 }

Regarding #5, I don’t see the active highlight, did you solve this one already?

Let us know how that goes. Hope this helps – thanks!

[Andcom]

A thousand thank you’s.

# 5 – No I still need to know how deselect the active highlighted page please.

6) I have a lot of @media commands to break the menu to keep the main nav menu in line (I’ve removed ready for testing).

I tried adding the following code:

.x-navbar .menu-item-27 .sub-menu {background-color: #EC1D24;text-align: center; width: 150px!important}

It makes it smaller, but it’s like there’s some rule stopping it going that small? If I make the px larger it works as expected. I tired .desktop in front as it looks like this command is working in the mobile menu, what am i missing?

Sorry to ask, but 2 quickies:

7) I tired float left in the above, but when the sub menu is open, how to have it sit to the left, not right as present. (as in the menu placement, not how it opens like we fixed above)

8) I just noticed, all the writing is squashed together in the submenu’s, I tried changing the h spacing’s in the customizer, but it didn’t do anything, how can i make the spacing between the letters bigger and the font bolder?

Super thanks in advance.

[Christopher]

Hi there,

#5 Please add this CSS :

.x-navbar .desktop .x-nav > .current-menu-item > a {
    color: #000;
}

#6 Update your code to :

.x-navbar .menu-item-27 .sub-menu {
background-color: #EC1D24;
text-align: center; 
width: 150px!important;
min-width: 150px!important
}

#7 & 8 Add this as well :

.x-navbar .sub-menu {
    right: auto !important;
}
x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu li > a, .x-navbar .mobile .x-nav li a {
    font-weight: 700;
    letter-spacing: 0.244em;
}

Hope it helps.

[Andcom]

Perfect, thank you so very much. I have 2 more hopefully simple questions if I may.

9) I have changed the 2 downwards arrows in the menus, in mobile view it looks how I want it, text left, icon right. How do I make the main nav bar menu look the same please?

10) I added a border to the sub menu, but it’s around the whole menu and tried using the code (`.desktop .sub-menu .menu-item {display: inline-block;} & .mobile .menu-item {display: inline-block;
}`) to try and get the nav menu / sub menu items to sit side by side, but in desktop it’s just 1 box with 2 sub menu’s in it! 🙁 how to box it out like the mobile menu shows the items?

Picture attached as to what i’m trying to do, thanks again.

[Andcom]

Quick update to the above, I thought I was nearly there with the mobile menu, using float left / right and width’s I’ve got the mobile nav sitting side by side, but I wanted to add space around the buttons and now the background color is spreading outside the boxes.

Unless I’ve done it all wrong, I just need the background color to sit only in the boxes (as it did before I broke it making them sit inline).

Also the shopping cart / search button in the row at the bottom,the gap isn’t consistent (every time I add padding to the search box gets smaller?) / the shopping cart is dropping down when the screen is made smaller.

Sorry & thanks in advance (again) 🙂 (still stuck on 9 + 10 above)

[Christopher]

Hi there,

Please add this :

.x-navbar .desktop .x-nav li>a>span:after {
    content: "\f067" !important;
    position: absolute;
    top: 22px;
    right: 0;
    bottom: 0;
}

@media (max-width:979px){
.x-navbar {
    border-bottom: 1px solid #000;
}
}

Please find this code :

@media (max-width: 767px){
.menu-item-27 {
    background-color: #EC1D24;
    text-align: left;
    width: 50% !important;
    padding: 5px !important;
    float: left !important;
}
}

And update it to :

@media (max-width: 767px){
.menu-item-27 a {
    background-color: #EC1D24 !important;
    text-align: left;
    width: 50% !important;
    padding: 12px 3px !important;
    float: left !important;
}
}

Do the same for other menu items as well.

Add this code as well:

@media (min-width:979px){
ul#menu-main-nav-uk >li:nth-child(1), ul#menu-main-nav-uk> li:nth-child(2), ul#menu-main-nav-uk >li:nth-child(3), ul#menu-main-nav-uk >li:nth-child(4){
    width: 14%;
}
.menu-item-27 {
    background-color: #EC1D24 !important;
    text-align: left;
}
}

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.

Hope it helps.

[Author]

Posts