Docs

[giurca86]

Hi Themeco,

Long-time(multiple) user here and very happy at that!

I have a client(http://www.rcprojects.com.au/) with a static PHP site that I am in the process of rebuilding in WordPress(with x theme), and I would love some help on how to establish the same look as the old static site.

Attached is a screenshot of the old site. In particular, I need to recreate the side menu look, complete with underlines and text numbers above the links. The main links also expand when clicked, revealing multiple pages. The result is always displayed in the main body.

Could you help me out with the css to get the look close to original?

Thanks in advance!

Ben

[Paul R]

Hi Ben,

Thanks for writing in!

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

jQuery(function($) {
    $(".x-nav-wrap.desktop > ul.x-nav > li").each(function(index) {
        index = index+1;
        $(this).children('a').prepend('<div>/0'+index+'</div>');
    }); 
$(".x-nav-wrap.desktop  ul.sub-menu > li").each(function(index) {
        $(this).children('a').prepend('} ');
    }); 
});

Then add this in custom css

.x-nav-wrap.desktop > ul.x-nav > li > a > div {    
    font-size:10px;
}

.x-nav-wrap.desktop > ul.x-nav > li {    
   border-bottom:1px solid #fff; 
}

.desktop .menu-item.x-active>.sub-menu {
    width: auto;
    position: static;
    min-width:100%;
}

Hope that helps

[giurca86]

Thanks Paul,

Excellent support as always!

One more thing please, the logo seems to have a left margin of 30-40px but I cannot alter it from the customizer “Navbar Side Logo Alignment (px)” control.

How could I get the logo to line up with the rest of the menu structure?

Thanks so much!

Ben

[Rue Nel]

Hello Ben,

Thanks for the updates! To move the logo a little bit to the left, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar-fixed-left .x-brand {
    margin-left: 10px;
}

To line it up to the rest of the menu, you can set the left margin from the code above to zero.

Hope this helps.

[giurca86]

Thanks very much, this worked like a charm!

One more question please, in the attached image above you can see that there is an address/contact section stacked at the bottom of the side menu. How would I go about setting this up?

Ben

[giurca86]

I have another question also, How would I implement the accordion menus as in the screenshot attached.

I want them to stay open once the main menu heading is clicked, and contract once main heading is clicked again. I would also like them to be aligned with the main menu heading when expanded.

[giurca86]

Hi Support,

Thank you so much for the support so far. This is the first time designing with your theme that I have relied so much on the famous X Theme support network.

I have yet one more problem here 🙂 The drop down menus will disappear as soon as you try and select them. I cannot get it to display long enough to click on. Now, I have tried almost a dozen different bits of css from the forum and nothing seems to work.

Could you also help me out with this one? (http://www.rcprojects.com.au/)

Thank you so much in advance!

Ben

[Rad]

Hi Ben,

The submenu is triggered by hover, hence, will hide when you hover it out too 🙂

The desktop submenu isn’t set up for that purpose. There should be a trigger to hide it again, and it’s the hover out.

My question is how do you like to trigger the hiding effect? Should it disappear only after the user click it? What if the user just accidentally hover on it and no idea of closing it? Should it be a toggle ( Only display and hide when clicked )?

Thanks!

[giurca86]

Hi Rad,

I would prefer if it only appeared once the user clicked the main menu heading(which will be #null), and then disappeard if the user clicked the same heading gain.

But if this is not possible, it would be fine if the sub menu stayed visible while the user is hovering over it, which it is not doing at the moment. So just to be clear, I cannot click the sub menu links at all – they simply disappear once you try to hover over them.

I hope this makes sense.

Ben

[Paul R]

Hi Ben,

To achieve that, you can add this in custom > javascript

jQuery(function($) {
	$('.x-navbar .desktop .x-nav > li.menu-item-has-children > a').on( "click", function() {
                $(this).next().toggle();
        });
});

Then add this in custom css

.desktop .menu-item.x-active>.sub-menu {
    display: none;
}

Hope that helps

[giurca86]

Hi Paul,

Thank you very much for your solution above, it is an improvement. However, when I attempt to hover over any of the menu items they display a strange behavior where the entire sub menu moves to the side and is still unclickable.

Could you have a look and help me out with a solution?

Thank you in advance as always!

Ben

[Rue Nel]

Hello Ben,

To resolve the hover issue with your sub menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
    display: block;
    float: none;
    position: relative;
    left: auto;
}

Hope this helps. Kindly let us know.

[giurca86]

Thanks Ruel,

This makes the links clickable but now the menus are expanded by default. How could we fix this so that the page loads with the menus contracted? Thanks so much for the help, we are almost there!

Ben

[Rad]

Hi there,

Please change it into this,

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
    float: none;
    position: relative;
    left: auto;
}

Thanks!

[giurca86]

Outstanding!

Ben

[Author]

Posts