Navbar below logo upon scroll and logo disappears on mobile

[melistrom]

Hello,

Problem#1
When I scroll, the navbar appears above the logo. I do not want that to happen.

Problem #2
On the mobile version, the logo disappears. I have tried to resize and everything with no luck.

Problem #3
How do I remove the border around the posts? I want it to look more chic. I notice there is the same border around the products in the shop and I would like it gone if possible

Thanks!

[rad]

Hi Melissa,

Thanks for reaching out.

1. You have existing customization, and it lacks navbar positioning since there is a logo. Please add this CSS as well along with your custom CSS

    .x-navbar.x-navbar-fixed-top {
     top: 97px;   
    }

2. It’s hidden because of your custom CSS, you hide the image on mobile and displayed it as background image. Please remove those CSS. Like this

.x-brand img {
    display: none;
}

3. Please add this CSS to Theme Options > CSS

.x-recent-posts a {
border: 0px !important;
}

Hope this helps

[melistrom]

Thanks!
But now the logo is on the left and I want it in the middle.

[rad]

Hi Melissa,

To center it, please remove this custom CSS as well,

.masthead-stacked .x-brand {
    float: left;
}

Cheers!

[melistrom]

Hello! That helped!!

1. Now the logo disappears on mobile and the text appears with a broken picture next to it. Also, there is a white bar that shows up when I scroll.

Also, the scroll is not very fluid…is there a way to fix this?

[rad]

Hi Melissa,

You have custom javascript code that alters the logo URL, and it applies a broken URL, example https://www.menamode.com/wp-content/uploads/2019/03/Webp.net-resizeimage-1.png

jQuery(document).ready(function($){
	var width = $(window).width();
	var logo_src = $(".x-brand img").attr("src");
	
	if(width < 980) {
		$(".x-brand img").attr("src", "https://www.menamode.com/wp-content/uploads/2019/03/Webp.net-resizeimage-1.png");
	}
	else {
		$(".x-brand img").attr("src", logo_src);
	}
});

Please change it to a valid image URL.

About the scrolling, it’s greatly affected with the current layout. It appears you have stacked navigation (top logo and bottom navigation) and you’re only forcing it as inline for mobile. Since the logo isn’t part of fixed navigation and only made the logo bar fixed through custom CSS then I’m afraid it will not appear as fluid upon scroll. But what you’re trying to do is applicable for Pro custom header. In X theme, fixed navigation is disabled for mobile view for many reasons and you have enabled it back with custom CSS with additional CSS for logo which was never part of it. I recommend trying Pro for this purpose

Thanks!