Mobile Sticky Menu

[bestfitbybrazil]

when i set Sticky menu to enabled.

my desktop and mobile create a transparency background on scroll

i checked all the colors in theme and can’t find where to change this background color

this is what i’m trying to make happen

before scroll on mobile                 after scroll on mobile

                   

[Harry]

Hi,

Please go to Theme Option > Color Scheme to change header background color.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi,

I check your site don’t see issue like yours. Did you fix by change background of header?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

No.  i turned off sticky sense you can’t see menu button very good on mobile because of the transparency.  Website is https://bestfitbybrazil.com.  were you looking at wrong site?  Do you need me to turn it on again, or do you need access?

[Harry]

Hi,

Could you enable to check. Or enable on staging site.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

ok you can check https://sexyleggingsusa.com.  Sticky is enabled.

[Harry]

Hi,

Please file in Theme Option > General Layout > Custom CSS

.header-sticky .header__mid {
	box-shadow: none;
	background: none;
}

And delete this code. After that go to Color Scheme to change Header Sticky Background Color http://prntscr.com/nkd8pt

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

i put the css code. then changed the header sticky background color to black.  still showing transparency.  You said delete the css code i just put in??

[bestfitbybrazil]

when i change the css code background from “none” to “black”, it changes the color, but the problem is its too thick.  its not 1 bar menu, but 2 bars. how can we make the menu move up to top bar on desktop and keep name logo showing on both mobile and desktop?

[bestfitbybrazil]

i was able to fill color with this code, but not with theme feature. but how do you make the 1 bar for menu items so not so thick on desktop and still show logo when scroll?

.header-sticky .header__mid {
box-shadow: none;
background: black;
}

Menu and Social media icons should be on same line and “sexy leggings usa” logo name should drop to left side of same row like https://bestfitbybrazil.com does now when you scroll

[Harry]

Hi,

I’m sorry the sticky layout can’t move logo on left as you want.

To show logo please go to Theme Option > Header and upload sticky logo

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi,

Please add below code

.header-sticky .header__mid > .jas-row {display: none;}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Still showing both lines.

first row with icons and second with menu when scrolled

[Harry]

Hi,

Please try again with code

.header-sticky .header__mid .jas-row {
	display: none;
}

Please copy on this topic don’t copy via email. I see the code not apply on your site.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

ok that works on the desktop but now the mobile sticky is is not working.

[Harry]

Hi,

Please change code to

@media only screen and (min-width: 1025px) {
.header-sticky .header__mid .jas-row {
	display: none;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

ok this is how i’m set up on live server.  its a little different than where we were.  but i think it might be better to start here.

on the desktop everything is fine with sticky DISABLED because i believe you coded something long time ago and it looks like this:

 

DESKTOP looks like this

My header set up is this  3 layers. red bar with icons, second bar with logo name and 3rd with main menu

When i scroll this is what it looks like:

Logo moves to left side of menu bar other bars disappear (PERFECT)  This is just what i want to happen

On my mobile this is what it looks like BEFORE scroll

when i scroll menu DISAPPEARS.  does not stick.  the menus disappear after scroll.  i think i need code so somehow we could be able to keep logo title so it looks like this AFTER scroll

[Harry]

Hi,

Our theme never support it before when scroll down move logo to left. Did you hire some freelancer to do it or you use sticky header of UberMenu.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I can’t remember if code was created for this feature.  However, the only thing i need from you is how to make the movie stick on scroll so it looks like the image i sent before this using css.  The upper red section of menu should just scroll away as it is doing now, and leave only the black menu.  Logo is already set up on the menu.  Just need to make it stick.

[Harry]

Hi,

It now on your site on desktop still work like you want. And it is a feature of uber menu not our theme. http://prntscr.com/nm2lap

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

no.  check https://bestfitbybrazl.com.  Sexyleggingsusa.com is test site. and on sexy leggings sticky is ENABLED in your theme.  but on mobile no logo shows on scroll.  on Bestfitbybrazil.com, sticky is DISABLED, but stick still works on desktop just not on mobile device but log is there.  i just need mobile to stick by css code.

[Harry]

Hi,

please add below code to claue-child > functions.php

if ( ! function_exists( 'jas_claue_custom_data_js' ) ) {
	function jas_claue_custom_data_js() {
		$data = array(
			'load_more'    => esc_html__( 'Load More', 'claue' ),
			'no_more_item' => esc_html__( 'No More Items To Show', 'claue' ),
			'days'         => esc_html__( 'days', 'claue' ),
			'hrs'          => esc_html__( 'hrs', 'claue' ),
			'mins'         => esc_html__( 'mins', 'claue' ),
			'secs'         => esc_html__( 'secs', 'claue' ),
			'popup_remove' => esc_html__( 'Removed from the cart', 'claue' ),
			'popup_undo'   => esc_html__( 'Undo?', 'claue' ),
		);
		if ( wp_is_mobile() ) {
			// Header Sticky
			$data['header_sticky'] = cs_get_option( 'header-sticky' );

		}

		// Get option for permalink
		$data['permalink'] = ( get_option( 'permalink_structure' ) == '' ) ? 'plain' : '';

		$data['wc-column'] = ( cs_get_option( 'wc-column' ) !== '' ) ? cs_get_option( 'wc-column' ) : 3;
		
		$data['portfolio-column'] = ( cs_get_option( 'portfolio-column' ) !== '' ) ? cs_get_option( 'portfolio-column' ) : 3;

		$data['wc-single-zoom'] = ( cs_get_option( 'wc-single-zoom' ) !== '' ) ? cs_get_option( 'wc-single-zoom' ) : 0;

		return $data;
	}
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Ok i put this code in and when i refreshed site it only showed a white screen with nothing on it. site not loading.  when i take your code out, then site loads normally. This is what is in the functions.php file already before adding your code.

<?php
/**
* Claue child theme functions.
*
* @since 1.0.0
* @package Claue
*/

/**
* Enqueue style of child theme
*/
function jas_claue_enqueue_script() {
wp_enqueue_style( ‘jas-claue-parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘jas_claue_enqueue_script’ );

add_action( ‘woocommerce_checkout_after_order_review’, ‘add_product_slider_after_checkout’ );
function add_product_slider_after_checkout() {
echo ‘<h2 class=”mt_30″>BEFORE YOU GO…</h2>’;
echo do_shortcode( ‘[claue_addons_products limit=”20″ slider=”yes” items=”4″ columns=”4″ issc=”1″ arrows=”true” autoplay=”true” flip=”true” id=”” order=”DESC” orderby=”rand”]’ );
}

if( ! function_exists( ‘yith_wcan_exclude_category_terms’ ) ){
function yith_wcan_exclude_category_terms( $terms ){
$to_exclude = array( 982, 379, 419, 420, 423, 427, 424, 426, 422, 429, 421, 428, 512, 1000, 1004, 982 );

return array_merge( $terms, $to_exclude );
}
}
add_filter( ‘yith_wcan_exclude_category_terms’, ‘yith_wcan_exclude_category_terms’ );

/**
* Remove decimals from Product prices in WooCommerce
* @author Dhiren Patel
* @link http://www.dhirenpatel.me/remove-decimals-product-prices-woocommerce/
*/

// Trim zeros in price decimals
add_filter( ‘woocommerce_price_trim_zeros’, ‘__return_true’ );

[bestfitbybrazil]

wait it appears the email converted the code symbols.  so i copied code from here and no white screen, but now mobile not sticking again.

[Harry]

Hi,

Please enable header sticky option in Theme Option > Header

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

sticky is enabled in them. before if put the function code in, the mobile was sticking but not with logo. now its not sticking but logo is there.  check it https://sexyleggingsusa.com

[bestfitbybrazil]

ok mobile is sticking now.  maybe cache was issue, but still no logo on mobile after scroll.

[Harry]

Hi,

Please upload sticky logo in Theme Option.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

Finally! That worked thx.

[bestfitbybrazil]

having issue with this again.  black sticky menu disappears under slider on home page.  look at bestfitbybrazil.com in mobile view .  The last css i put in, i removed and it still doesn’t work, so not sure what happened.

 

[bestfitbybrazil]

fixed it 🙂  it was this code i used to move the cart image closer to the top of page.  this effected home page sticky menu.

/* Cart position adjustment on mobile */
@media only screen and (max-width: 768px) {.vc_column-inner{
position: relative;
top: -40px;
}
}

[Author]

Posts