How can I improve the look of my sticky header code?

[DandSmart]

i use this code to make header sticky but it looks so bad

88888888888888888888888888888888888888888888888

<style>
@media only screen and (max-width: 600px) {

.mobile-header-area.d-xl-none {
position: fixed !important;
z-index: 2 !important;
}

.col-12 {
margin-top: 83px !important;
}
}
</style>

88888888888888888888888888888888888888888888888888

originally it look like this but its not sticky

[Made4uo-Ribe]

Hi @DandSmart 

Oh, i thought this problem already solve. Check this one. 

@media only screen and (max-width: 749px) {
.mobile-header-area.d-xl-none {
position: fixed !important;
z-index: 2 !important;
width: 100% !important;
}
.col-12 {
margin-top: 83px !important;
}
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[DandSmart]

it worked but other issue occured 
orignal is This

[Made4uo-Ribe]

Add this code. 

 @media only screen and (max-width: 749px) {   
.ltn__breadcrumb-area.ltn__breadcrumb-area-2.ltn__breadcrumb-color-white.plr--9.breadcrumbs.overlay-bg {
    padding-top: 83px !important; 
}
 }

And Save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[DandSmart]

when i scrawl theses word also scrawl and shows on header check it out