[EyoaelParticipant]

HI,
Fixing hamburger menu for mobile view, 2 questions,
1)I was wondering if you guys could help me with my mobile hamburger menu. I’m currently using the following css to onlly display the three lines for the hamburger menu without any background, but it is not looking exactly like i wanted it to can you help?;

.x-navbar {
-webkit-box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
}
.x-navbar .mobile .x-nav li>a {
border: none;
}
a.x-btn-navbar {
background-color: transparent !important;
box-shadow: none !important;
}

2) I was wondering if guys could help me to make my mobile hamburger menu to look and innteract like the following example website http://inturn.co/ they are using the following. I’m currently using the following css and js for my navbar menu:

@media screen and (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed !important;
}
}
.x-navbar {
border: none;
box-shadow: none; background-color: transparent;
}
.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: White;
}
.x-navbar-scrolled .desktop .x-nav > li > a > span {
color: #fff;
}

.x-navbar-scrolled .desktop .x-nav > li > a > span:hover {
color: #1974d2;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
margin-bottom: 0;
}
@media (min-width: 980px) {
.x-slider-container.below {
margin-top: -75px;
}
}

and the js

jQuery(document).ready(function($){
$(‘ .x-navbar-fixed-top’).css(“background-color”, “transparent”);
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$(‘ .x-navbar-fixed-top’).css(“background-color”, “rgba(33,33,33,0.99)”).css(“transition”,”0.3s ease-in-out “);
} else if ($(this).scrollTop() > 300) {
$(‘ .x-navbar-fixed-top’).css(“background-color”, “rgba(33,33,33,0.75)”).css(“transition”,”0.3s ease-in-out “);
} else if ($(this).scrollTop() > 200) {
$(‘.x-navbar-fixed-top’).css(“background-color”, “rgba(33,33,33,0.5)”).css(“transition”,”0.3s ease-in-out “);
} else if ($(this).scrollTop() > 100) {
$(‘ .x-navbar-fixed-top’).css(“background-color”, “rgba(33,33,33,0.35)”).css(“transition”,”0.3s ease-in-out “);
} else {
$(‘.x-navbar-fixed-top’).css(“background-color”, “transparent”).css(“transition”,”0.3s ease-in-out “);
}
if ($(this).scrollTop() > 100) {
$(‘ .x-navbar-fixed-top’).addClass(‘x-navbar-scrolled’);
} else {
$(‘ .x-navbar-fixed-top’).removeClass(‘x-navbar-scrolled’);
}

if ($(this).scrollTop() > 100) {
$(‘.x-brand.text’).addClass(‘white-text’);
} else {
$(‘.x-brand.text’).removeClass(‘white-text’);
}

});
});

can you guys help me with this, please?

Thanks

[Paul RModerator]

Hi,

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.

[EyoaelParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

1.) The CSS is working. It is just hidden behind the wordpress admin menu bar when you scroll down. See this:
Then if you want it to be on top of the slider, please also add this:http://screencast-o-matic.com/watch/cbneXeQWz9

.home .x-slider-container.below {
    margin-top: -100px; /*Adjust this as necessary*/
}

2.) That functionality is not available by default. It is possible with some customization that is beyond the scope of our support. Although you might want to check Superfly. They have the same effect.

Hope this helps.

[EyoaelParticipant]

Hi,

I understand but can you atleast help me fix the problem when viewing the dropdown menu in mobileview when you scroll down the background is black which makes the links disappear and you can only see them if you hover over them. I hope this make sense.

Thanks

[RahulModerator]

Hey There,

Thanks for writing back!

Unfortunately, this is beyond the scope of our support. You may need to follow below mentioned link for more customization :

Please see https://theme.co/x/member/custom-development/

Thank you for understanding.

[Author]

Posts