Sticky menu on tablet

Hello @nam1962,

Please add this to Customize => Additional CSS:

@media ( max-width: 768px ) { .header-main { padding-top: 95px !important; } }

Hope it helps!

Hi @pressmaximum ,
thank your for caring.
As you can see it still is overlapping. (I kept it live for you).

For the smartphones, I set the upper menu at 39px.

Here my CSS :

/* taille police notice cookies */
#cn-notice-text {
  font-size: 14px;
	font-family: "Josefin Sans";
}

/* centrer logo */
.site-branding img { margin: 0 auto; }

.elementor-button, .button.add_to_cart_button, .button.added_to_cart, .button.alt, .button.checkout, .button.product_type_external, .button.product_type_grouped, .button.product_type_variable, 
.button.wc-backward {
	font-size: 16px;
	font-family: "Josefin Sans";
	background-color: #f7a667;
	border-radius: 3px;
	
}

.woocommerce .product img {
    border: 10px solid white;
}

/* sticky top 
 @media only screen and (min-width: 760px)*/ 
.header-top{
	position: fixed;
	width: 100%;
	z-index: 1000;
}

.header-main {
	padding-top: 38px; 
}

@media ( max-width: 768px ) { .header-main { padding-top: 95px !important; }  }

/*bouton sur image*/
.image-button a {
	padding: 50% 0 !important;
}

/*style prix*/
.woocommerce-Price-amount.amount {
  font-family: "Josefin Sans";
  font-weight: 400;
  font-size: 16px;
  color: #f7a667;
}

/*clean footer*/
.widget-area .widget_nav_menu li a {
	border-bottom:none;
	padding-bottom:0px;
}

div.product div.summary  {
	padding-left:10px;
	border: 5px solid #e6e6e6;
}

/*permet reglage taille catalogue*/
.woocommerce ul.products li.product a img { width: auto; }

• This reply was modified 6 years, 4 months ago by nam1962.
• This reply was modified 6 years, 4 months ago by nam1962.

Did you clear the browser cache @nam1962?

Please see: https://cl.ly/782957545593

It does not overlap on the tablet screen.

On mobile, you could add this:

@media ( max-width: 499px ) { 
.header-main { padding-top: 43px !important; } 
}

Let me know!

• This reply was modified 6 years, 4 months ago by PressMaximum.

Hello,
I rechecked, cache was empty.
Then, I realized, it depends on the window/screen size.
If I want no overlap, I have to set up the upper limit (but then, when window or screen decreases, the gap between upper & principal heading widens).
I don’t quite understand why it’s not the case for desktop.

Here the amended CSS I had to settle for no overlap.

@media ( max-width: 1024px ) { .header-main { padding-top: 120px !important; }  }

@media ( max-width: 499px ) { 
.header-main { padding-top: 56px !important; } 
}

And here, illustration with overlap over 768px (prior to amended CSS) and with gap, when screen size goes down :

https://pix.tdct.org/?img=1543227088.png
https://pix.tdct.org/?img=1543227092.png

• This reply was modified 6 years, 4 months ago by nam1962.

@nam1962 It is very easy if you use the Pro version.

In this case, you added position fixed to header top row, and add a fixed padding-top value for header main same as the header top row height on each desktop, tablet, and mobile screen.

However, the header top row height is dynamic. It is changed on each resolution and you can’t add exactly padding-top for all screens by custom CSS. And we can’t support you in this case.