Sticky menu on tablet

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 7 years, 6 months ago by nam1962.
• This reply was modified 7 years, 6 months ago by nam1962.

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 7 years, 6 months ago by nam1962.