Docs

[850it]

Hi,

I want to implement the things you did on the main X theme page, http://theme.co/x/. Can I just download that page like a demo and install it?

My questions are mainly about the menu actually. Which menu did you use? How did you manage to put the menu on the bottom of the screen depending on the monitor size? When I make the slider above masthead fullscreen, my menu drops down below the screen, I need to scroll down to see the menu.

Thanks

[Joao]

Hi There,

Unfortunely this page is not among our demos. But it is 100% built with X and we can help you achieve it what you are looking for.

The menu is from Ethos Stack, you can go to Appereance > Customizer > Stacks and select Ethos.

1-Create a full screen slider on revolution slider.

On Slider Settings > Find the Box : Increase/ Decrease… and add: .masthead

See image attached.

2- Click Edit Page > Select Slider Above Masthead.

Hope it helps

Joao

[850it]

Thanks for the answer, it worked 🙂

Also how did you divide the two sections with a divider shaped like a arrow pointing down, just below the The First Of Its Kind section?

Thanks

[850it]

Also I am using the Uber menu but it is not full width even I select it to be full width and I have the additional CSS:

.masthead .x-container-fluid {
   max-width: none;
   width: 100%;
}

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

Can you help with this?

Thanks

[Joao]

Thanks for writing in! 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.

[850it]

I was able to make to menu reach to the full length. But I still wonder about the arrow shaped divider on your site, attached picture shows which one it is.

[Joao]

Hi There,

Please add a class name to your section for example : the-stacks

Than add the following code to Appereance > Customizer Custom > CSS

.the-stacks:after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: #fff transparent transparent;
}
.the-stacks {
    position: relative;
}
.the-stacks:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: #dbdbdb transparent transparent;
}

Hope it helps

Joao

[850it]

How do I add the class name?

Thanks,

[Joao]

On Cornestone Click on the section and you will see on the bottom of the left tab a box for Class

Type there: the-stacks

Hope that helps

joao

[850it]

Ok thanks.

Is there a way to stop ubermenu from wrapping to a secind line? I want it to scale down and stay one line at all screen sizes.

Also is it possible with Ethos Stack menu.

Thanks

[Jade]

Hi there,

Would you mind providing the link to your site so that we can check it and provide you with the CSS code.

Thank you.

[850it]

This reply has been marked as private.

[850it]

Can you please help me

[Jade]

Hi there,

Please add this code in the customizer:

@media (min-width: 1239px) and (max-width: 1357px) {
    .ubermenu-main .ubermenu-item-level-0>.ubermenu-target {
        font-size: 13px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 1238px) {
    .ubermenu .ubermenu-item.ubermenu-item-278>.ubermenu-target {
        padding: 16px 70px 25px 100px;
    }

    .ubermenu-main .ubermenu-item-level-0>.ubermenu-target {
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }    
}

@media (min-width: 960px) and (max-width: 981px) {
    .ubermenu .ubermenu-item.ubermenu-item-278>.ubermenu-target {
        padding-left: 50px;
    }

}

Hope this helps.

[850it]

Thanks a lot it worked like a charm 🙂

[Author]

Posts