[bbddavidParticipant]

Hello guys,

I’m trying to create a top menu similar to the following URL using my copy of X theme:
http://theme.co/x/demo/integrity/1/shortcodes/icons/

In trying to accomplish this… I had read many forum articles… and finally discovered:

(1) – In order to do this with later copies of X theme, it appears we must use the Unicode from Font Awesome…
i.e. http://fortawesome.github.io/Font-Awesome/icons/ using the following format
<i class="x-icon-home" data-x-icon="f015"></i>

(2) – Most of the forum articles indicate that you just have to use <i class="x-icon-home"></i> which appears to be incorrect, for current versions of X-theme… This created a bit of confusion for me.

Anyhow, WITH THE ABOVE mentioned I was able to solve the the data-x-icon attribute issue so I am now able to see the icons…

However, even with this resolved… I am noticing a number of other issues I need to resolve in order to emulate the menu in the demo url… Specifically I’m interested in the following functionality:

(1) – Notice the x-icon-user icon on this menu, there is NOT a double down arrow associated to it, however it DOES have several sub-menu options which exist. How is this implemented? Anytime I try to create a sub-menu using X-theme, it always places the double down arrow next to the root menu option (similar to how the “Pages” menu option looks on the demo URL I mentioned) and I don’t see any options to disable this…

(2) – Notice the location of where the sub-menu is displayed with respect to the x-icon-user icon. The sub-menu gap is relatively small. Every time I try to create a sub-menu using X-theme the gap is much larger which is not as appealing. Again, I do not see any options to control the position.

(3) – Notice when you view the SHORTCODES menu option a huge list of sub menu options are displayed neatly in 4 very organized columns. How is this functionality implemented?

thanks in advance.
David

[bbddavidParticipant]

For all of the other users out there…
Sorry I created a TYPO in my ICON command in the above post…
I forgot the prefix (&#x) and suffix(;) characters to the unicode…

The command SHOULD look like the following:
<i class="x-icon-home" data-x-icon="<CODE>"></i>

where is equal to the prefix + unicode + suffix
&#x f015 ;

You can reference this URL for the rationale…
https://theme.co/changelog/#theme-4-0-0

[Paul RModerator]

Hi,

Thanks for sharing.

Have a nice day!

[bbddavidParticipant]

Hi Themeco Staff,

My questions above were not answered. I had only updated my own post for accuracy in case it would help other users. My questions which remain are here:

I’m trying to create a top menu similar to the following URL using my copy of X theme:
http://theme.co/x/demo/integrity/1/shortcodes/icons/

However, even with this resolved… I am noticing a number of other issues I need to resolve in order to emulate the menu in the demo url… Specifically I’m interested in the following functionality:

(1) – Notice the x-icon-user icon on this menu, there is NOT a double down arrow associated to it, however it DOES have several sub-menu options which exist. How is this implemented? Anytime I try to create a sub-menu using X-theme, it always places the double down arrow next to the root menu option (similar to how the “Pages” menu option looks on the demo URL I mentioned) and I don’t see any options to disable this…

(2) – Notice the location of where the sub-menu is displayed with respect to the x-icon-user icon. The sub-menu gap is relatively small. Every time I try to create a sub-menu using X-theme the gap is much larger which is not as appealing. Again, I do not see any options to control the position.

(3) – Notice when you view the SHORTCODES menu option a huge list of sub menu options are displayed neatly in 4 very organized columns. How is this functionality implemented?

[LelyModerator]

Hello There,

Thanks for writing in!

#1 and #2 To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3 We’re using megamenu. Please refer to this link:https://community.theme.co//kb/how-to-setup-megamenus/

Hope this helps.

[bbddavidParticipant]

Thank you.

For #3, this helps, however the answer response in this forum says to place x-megamenu col-3 attribute in an Optional CSS textbox of the top level menu item when you are building your menu in X theme. Where is this Optional CSS textbox in the X theme 4.0.5?

Concerning #1 and #2:
I don’t understand your response. I’m not looking for a tailored answer on my website. I’m trying to understand how the menu on this URL http://theme.co/x/demo/integrity/1/shortcodes/icons/ was built.

(1) – If you look at this site, please notice the x-icon-user icon on this menu. There is not a down arrow indicating submenus… yet submenus exist. How was this implemented?

(2) – Additionally, if you look at the submenu border, the placement of the top edge of the menu, it overlaps the header portion of the site. Also, it looks like it has a shadowing effect on the right and bottom edges. How was this implemented?

thanks,
David

[ZeshanMember]

Hi David,

#1: Those are special menu items and available only when bbPress and buddyPress are installed in your website. That is the reason you are not seeing any dropdown arrow. If you want to disable dropdown arrow from all your normal menu items with submenu, you may want to use following CSS code under Custom > CSS in the Customizer:

.x-navbar .desktop .x-nav li>a>span:after {
    content: '';
    display: none;
}

#2: The dropdown position and styling could be different on each stack. If you are using integrity stack, this styling and position should be available by default. If you are using a different stack and want to achieve this styling, custom CSS code is required. It would be best if you can provide us with your site URL so we can take a closer look and provide you with a tailored response.

#3: You need to enable this option under Screen Option (see: http://prntscr.com/81jx84) as mentioned in our KB article on megamenus under the Activation section.

Thanks!

[bbddavidParticipant]

This reply has been marked as private.

[LelyModerator]

Hello David,

(2)Please add the following CSS:

.x-navbar .desktop .x-nav > li ul {
    top: 104px;
    border: none;
    padding: 18px !important;
    box-shadow: 0 3px 5px rgba(0,0,0,0.25);
    border-radius: 4px;
}

(3)

.desktop .x-nav .x-megamenu>.sub-menu>li>a {
     font-size: 12px;
}
.desktop .x-nav .x-megamenu>.sub-menu>li {
    padding: 0px 26px 0px;
}

Hope this helps.

[Author]

Posts