Logo and menu on mobile

Support
#1

Hi there,

How can I get the logo to align left and the mobile menu to appear next to it one the right. Currently it sits on the right below it.

http://dev.abnorml.com.au

Also is there a way to get the HTML 5 video in rev slider to fit the width of the panel. I have it set as a layer not a background image, but you can see black edges on mobile and when you shrink the page in and out.

Thanks

#2

Hello Paul,

Thanks for writing in!

1.) To get the logo to align left and the mobile menu to appear next to it on the right, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
    .masthead-stacked  .x-logobar {
        text-align: left;
    }

    .masthead-stacked  .x-navbar-wrap {
        position: absolute;
        top: 40px;
        right: 20px;
    }

    .masthead-stacked .x-navbar {
        border: none;
        box-shadow: none;
    }
}

2.) To make your video fit in the slide, you will need to add it as a background video and not as a video layer. For more details on adding a background video in your slider, please check out this documentation:

We would loved to know if this has work for you. Thank you.

#3

Hi @RueNel,

The menu worked, and looks fine when displayed on the website at 480PX & Smaller, but wehn I pull it up on my iphone, the logo still looks centered. Is there a way to make the logo a little smaller and move to the left.

I will give the background option in SliderRev a go.

Thanks,

#4

Hello Paul,

You have pasted:

@media(max-width: 979px){
    .masthead-stacked.x-logobar {
        text-align: left;
    }

    .masthead-stacked  .x-navbar-wrap {
        position: absolute;
        top: 40px;
        right: 20px;
    }

    .masthead-stacked .x-navbar {
        border: none;
        box-shadow: none;
    }
}

Which is supposed to be this:

@media(max-width: 979px){
    .masthead-stacked  .x-logobar {
        text-align: left;
    }

    .masthead-stacked  .x-navbar-wrap {
        position: absolute;
        top: 40px;
        right: 20px;
    }

    .masthead-stacked .x-navbar {
        border: none;
        box-shadow: none;
    }
}

Please check the code again.

#5

Thanks, but I would like the logo a little smaller and the ability to move it away from the menu if possible.

#6

Hi,

Please add this code as well.

@media(max-width:767px) {
.masthead-stacked .x-brand {
    display: block;
    float: left;
}

.x-brand img {
    width: 200px;
}
}

You may change 200px to adjust the size of the logo.

Thanks

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.