when I add position fixed the header goes down from its normal position ?

You’ve commented out class flex-header and everything within on your linked page. Anyone wishing to help you would need live content to fiddle with to better see what you’re referring to and to experiment with using element inspector to ensure any suggestions are valid. Hard to do when everything exists as HTML comments ??

Yes, one could copy everything into their own test page, but that takes greater effort. The greater the effort, the less likely someone is inclined to help. It’s in your best interest to make this as easy as possible for other members. Additionally, any CSS file and line references on ones own page would be meaningless to you.

thanks,

I have put back . I wil wait few hours.

sorry,

I am going to change the code.

it seems this problem is complicated.

I used inspect element but I couldn’t see any clear sign.

I let know when I solve this problem in onother way .

I have to solve this problem.

thanks

after trying to solve the problem I tought suddenly I wil try javascript to fix the header and try to solve the problem in this way .

I know very little about javascript at this moment so I tried ( AI ) I wil not give name only to let you know that I am not javascript expert.

otherwijs I wil not ask question here!

at this moment it is solved the problem when I scroll down the header is fixed incl. using flex.

this is the html at this moment as an example:

<header>
	
	<div class="container">				
		<div class="row">		
		
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
		</div>
		
	</div>
	</header>

this is the CSS code:

* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			max-width: 100%;
			height: 70px;
			background-color: red;
			position: fixed;
			top: 0;
			left: 0;
		}
		.col {
			flex: 1;
			height: 100%;
			
			
		}

and this is Jquery code:

<script>
	
$(document).ready(function() {
    var containerTop = $('.container').offset().top;
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= containerTop) {
            $('.container').css({
                position: 'fixed',
                top: 0,
                left: 0
            });
        } else {
            $('.container').css({
                position: 'static'
            });
        }
    });
});




</script>

you have to use jquery cdn or enqueue the jquery in function.php like this:

function your_theme_name__scripts() {
  wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'your_theme_name__scripts');

the problem is solved with fixing the header container class with jquery

and I can use now flex also .

I writed because if somebody has such a problem the only way is sometimes to use javascript to solve otherwijz I have no interest in anything.

you help me I write it back if I found solution.

I have been busy for few days whitout results untill I thought to try javascript.

maybe the browser is confusing with flex and position: fixed

you can see it on my homepage: https://webdesignleren.com/

thanks