Docs

[ikrasnov]

Hello,

I am in the process of converting a site from an old theme to Xtheme – Have two items that I need some help with.

Original site: https://irmsinc.com
New Xtheme site: https://irmsinc.com/staging

1. On the home page of the original site, there is content overlayes on the main revolution slider (Protect the assets that matter to you…) – How would I replicate this in Xtheme?

2. On Original site, there are headings for the menu items (example attached) – what would be the best method to replicate this in Xtheme?

Thanks,
Igor

[Rad]

Hi there,

Thanks for posting in.

1. Two possible workaround.

a. Add a section just below the slider, then use negative positioning to overlap it. Though, since you don’t have content on your staging site, I can’t provide the CSS. Would you mind adding the content first?

b. Add those content as slider’s global layers. When editing your slider’s slides, there is global slide on the first tab that you could use. Any element you add to that slide will cover/overlay on all other slides. This is much recommended that first option since it’s responsive.

2. You can check your menus at Admin > Appearance > Menus and you can compare them both. Then just follow the structure from your old site.

Thanks!

[ikrasnov]

Will get the content on there tonight and reply to this post.

Regarding issue two: Apologies for not explaining better. Some of the menu items on the original site aren’t actually links, they are just headings. Was wondering how to accomplish this with X theme.

Thanks,

[Joao]

Hi There,

You simply add a custom link and leave the URL field empty:

http://www.wpbeginner.com/beginners-guide/how-to-add-titles-in-wordpress-menu-without-linking-to-a-page/

Please let us know if you would like help with anything else regarding this issue or any other,

Thanks

Joao

[ikrasnov]

Thanks Joao – The menu links are currently setup like that, but how do I style them differently? They look the same as actual links on https://irmsinc.com/staging – compare to irmsinc.com

Also – I have remade the slider content on the main page on https://irmsinc.com/staging – How do I go about removing the white-space below the revolution slider?

Thanks!

[Rue Nel]

Hello There,

Thanks for updating in!

To remove the white-space below the revolution slider, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.page-id-1454 .site > .x-container.max.width.offset {
    margin-top: 0;
    margin-bottom: 0;
}

“The menu links are currently setup like that, but how do I style them differently? They look the same as actual links on https://irmsinc.com/staging – compare to irmsinc.com”
– Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Please let us know how it goes.

[ikrasnov]

Thanks for that code, that worked.

What I mean is shown in the attached photos – I would like to style the “#” link similar to what is shown in “nonstaging.png”. I’ve also attached the staging example for comparison. Thanks for the help!

[Jade]

Hi there,

You will have to add a custom class for the menu item that are your headings. You can do so by follow this guide.

Supposing the class name you added is heading-menu, then add this CSS in the customizer:

.desktop .heading-menu a {
    color: #9AD0B5 !important;
    text-transform: uppercase;
    float: left;
    line-height: 20px !important;
    padding: 8px 0px !important;
    font-size: 12px;
    width: 100%;
}

Hope this helps.

[ikrasnov]

Thanks, this worked but seemed to break the next menu entry as shown in attachment, any advice?

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.desktop .sub-menu li.menu-item-2130,
.desktop .sub-menu li.menu-item-2195 {
     clear:both;
}

Hope that helps.

[Author]

Posts