[xs6615Participant]

Hello,
Thoroughly impressed with your there (X Integrity).

I would like to have the menu be inline when in a mobile device and stacked when viewed on a desktop. I found this reference: https://community.theme.co/forums/topic/move-mobile-nav-button-to-the-side/ and did achieve the basic goal.

However, two minor issues remain. I still have the white bar below the header (from the stacked view) and when I scroll the header is not sticky and disappears.

Please note attached image.

Thank you
David

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? 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.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[xs6615Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:979px){
.x-logobar{
border-bottom:none;
}
.x-navbar.x-navbar-fixed-top {
    top: 54px;
    position: fixed;
    left: 0;
    right: 0;
}
.x-logobar.x-navbar-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
}

Please add following code in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-logobar').addClass("x-navbar-fixed-top");
		} else {
			$('.x-logobar').removeClass("x-navbar-fixed-top"); 
		}
	});
});

In regards with background image please provide us with screen shot.

Hope it helps.

[xs6615Participant]

Hello and thank you. Unfortunately, this did not work. The result is the same, but with an additional black bar residing above the logobar.

[ChristopherModerator]

Hi there,

Please update your CSS to :

.x-navbar.x-navbar-fixed-top {
    top: 86px !important;
    position: fixed;
    left: 0;
    right: 0;
}
.x-logobar.x-navbar-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 32px !important;
}

Hope it helps.

[xs6615Participant]

Hello,
Sorry, but still no closer to what we need.

I removed all css, except the above and still no go. This should eliminate the possibility of a css conflict.

I played with the .x-navbar and .x-logobar and was able to get the logobar to work just right, but could not get the x-btn to display.

[JoaoModerator]

Hi There,

Could you please make a mock-up of how you would like the the navbar to behave?

On my end your website is stacked on desktop and inline on mobile.

Please see images attached.

Once you provide us a more detailed information of what you want to achieve will be easier for us to help you.

Thanks

Joao

[xs6615Participant]

Hello,

My concern is only about the mobile.

I would like to remove the black bar on top and the bottom white bar.

All I want is the single white bar with the title and menu button fixed on top.
Thanks

[RadModerator]

Hi there,

Please add this CSS as well,

@media screen and (max-width: 980px){
html {
    margin-top: 0px !important;
}
#wpadminbar {
display: none;
}
.x-navbar-inner {
min-height: 0px;
}
}

Hope that helps.

[xs6615Participant]

Hi Rad,
Much closer. I had to change Christopher’s css top to 0px to move the menu to the top of the screen.

Upon first load, it looks good. However, if you scroll the screen, the bar disappears. When you stop scrolling, it reappears, but without the menu button.

Thanks.
David

[ChristopherModerator]

Hi there,

Please add this code :

@media (max-width:979px){
.x-navbar.x-navbar-fixed-top {
    top: 54px !important;
    z-index: 1030;
    position: fixed;
}
}

Hope it helps.

[xs6615Participant]

BINGO!!!

Thank you

[xs6615Participant]

For anyone else with this issue, here is the final code:

CSS:

@media (max-width:979px){

/* Changes top navbar from desktop (Stacked) to mobile (inline) */

  .masthead-stacked .x-brand {
        float: left;
}
  .masthead-stacked .x-btn-navbar {
    display: inline;
    position: absolute;
    right: 0;
    top: -50px;
  }
  
/* Corrects layout to allow single line navbar and with menu button top right */

 .x-logobar{
    border-bottom:none;
}
 .x-navbar.x-navbar-fixed-top {
    left: 0;
    right: 0;
    top: 54px !important;
    z-index: 1030;
    position: fixed;
}

.x-logobar.x-navbar-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0px !important;
}
}

@media screen and (max-width: 980px){
	html {
    margin-top: 0px !important;
}
	#wpadminbar {
		display: none;
}
	.x-navbar-inner {
		min-height: 0px;
}
}

JS

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-logobar').addClass("x-navbar-fixed-top");
		} else {
			$('.x-logobar').removeClass("x-navbar-fixed-top"); 
		}
	});
});

[Paul RModerator]

You’re welcome and thanks for sharing.

Have a great day! 🙂

[Author]

Posts