Hi,
My navbar resize when scroll down and I don’t want that, because my menu is then on two lines that’s ugly for me.I don’t want it resize width when a scroll down is made.
i also have an other problem. When the window is too small width, the mobile bar appear.But I cannot click on the button. but this button works on mobile phones.
Thanks for your help
Best Regards
Alain
Hi,
First problem solved. For not resizing when scroll down I change the site width to 100% instead of 90%. I thought this parameter was the one that fixed the size of the site inside the background image. It seems I was wrong.
I still have the probem with my menu button that doesn’t work.
Best Regards
Alain
heuuu… ho shit…the menu size when scroll is solved but now I have no margin arround my texts inside in my site. This got me crazy…
Hi There,
I’ve just checked your website and it seems to look fine.
Could you please provide us with your screenshots?
Many thanks.
Hi,
here is the general look of my nav bar. When it is top. the nav-bar is at the border. 
when I scroll down:
.
And if the window is not so big, this scrolling and reduced size of nave-bar create this effect:
.
Thank you for sour help.
You noticed on my site, that I add many CSS code. One found here to define wich bar (nav-bar or mobile-bar) choosing depending the size of the window. It works, but not with this scroll reducing bar effet.
Best Regards
Alain
Hi There,
Please add the following CSS under Customizer > Custom > Global CSS:
.x-navbar.x-navbar-fixed-top.x-container.max.width {
width: 100%;
}
Hello,
thank you, this solved the problem with the margin on navbar.
Could you also check for my problem of mobile bar button that doesn’t work when I click on it?
thank you for your support!
Alain
Hello There,
Your menu is not working because of your custom css:
@media (max-width: 1160px) {
.x-nav-wrap.desktop {
display: block;
}
.x-nav-wrap.mobile {
display:none !important;
}
}
@media (max-width: 1159px) {
.x-nav-wrap.desktop {
display: none !important;
}
.x-nav-wrap.mobile.in {
display: block!important;
}
.x-btn-navbar{
display: block!important;
float: right;
color:#fffff2!important;
background-color:#383836!important;
}
.x-btn-navbar:hover{
color:#383836!important;
background-color:#fffff2!important;
}
}
Please remove it since it is conflicting.
You can make use of this code instead:
@media (min-width: 1160px) {
.x-nav-wrap.desktop {
display: block;
}
.x-nav-wrap.mobile {
display:none;
}
}
@media (max-width: 1159px) {
.x-nav-wrap.desktop {
display: none;
}
.x-nav-wrap.mobile.collapse {
display: none;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
.x-btn-navbar{
display: block!important;
float: right;
color:#fffff2!important;
background-color:#383836!important;
}
.x-btn-navbar:hover{
color:#383836!important;
background-color:#fffff2!important;
}
}
Please let us know if this works out for you.
Hi,
I tried to add your code. the crazy thing is that it works on the edit CSS preview, but not on the site itself, I tried to clear all cache but it doesn’t solve.
thank you for your help
Best Regards
Alain
Hi,
I investigate.
the code that cause the non opening menu is the
display: block!important;
from
.x-btn-navbar{
display: block!important;
…
}
if I remove display:block!important; I can click on the menu and open it. But from 1159px to default size for mobile, I have no button that is shown.
is there any conflicts with hidden code somewhere ?
Thank you for your help
Best Regards
Alain
Hi Ther,
Please us the following code instead to re-size your navbar
Theme Options CSS
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
-webkit-transition: height 0.5s ease, padding-top 0.5s ease;
transition: height12 0.5s ease, padding-top 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
-webkit-transition: min-height 0.5s ease;
transition: min-height 0.5s ease;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}
.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}
.x-navbar {
border:none;
box-shadow:none;
}
Theme Options Javascript
jQuery(function($) {
var $body = $('body');
var $navbar = $('.x-navbar');
if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
var boxedClasses = '';
if ( $body.hasClass('x-boxed-layout-active') ) {
boxedClasses = ' x-container max width';
}
$(window).scroll(function() {
if ( $(this).scrollTop() >= 60 ) {
$navbar.addClass('x-navbar-fixed-top' + boxedClasses);
} else {
$navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
}
});
}
});
Let us know how it goes.
Thank you
Hi,
I tried. But it doesn’t solve my problem.
I think previous ideas were better. Just this button issue.
Thanks for your help. Best Regards
Alain
Hi,
I found the solution. I finally used
@media (min-width: 1200px) {
.x-nav-wrap.desktop {
display: block!important;
}
.x-nav-wrap.mobile {
display:none!important;
}
}
@media (max-width: 1199px) {
.x-nav-wrap.desktop {
display: none!important;
}
.x-nav-wrap.mobile {
display:block!important;
}
.x-nav-wrap.mobile.collapse {
display: none!important;
}
.x-nav-wrap.mobile.collapse.in {
display: block!important;
}
.x-btn-navbar {
color:#fffff2!important;
background-color:#383836!important;
display:block!important;
float:right!important;
} /* Nav Open */
a.x-btn-navbar:hover, a.x-btn-navbar.collapsed:hover {
color:#383836!important;
background-color:#fffff2!important;
} /* Hover */
}
I just add on @RueNel solution some extra CSS, for the link and
for media max-size:
.x-nav-wrap.mobile {
display:block!important;
}
that was in my code and seems to be also needed.
Now it works as expected and I’m so happy!
Thank you for your warm support.
Best Regards
Alain
Glad to hear that you figured it out, Alain, 
yeah Finally after few days of crazyness… It seems working now!
Perfect!