LOGO and Menu in Mobile view

Hi basically my problem is i want to put the logo and Menu inside the slider just like in desktop view. you can refer to my link here

however when i switch on mobile view i got the following problem at my front page and other page in the menu.

front page Problem
other page problem

i have apply the following code to remove the background and display button

@media only screen and (max-width:1024px){
  
  .site-header,
  .site-header.fixed{
    position: absolute !important;
background-color: transparent !important;

.btn-menu {
     display: !important;
}
}
}

so the real question is

  1. how can i fix this the front page by putting the text slider slightly below the menu?
  2. how to put the logo and the menu inside the header without disturbing the page title in certain page in my website

Thank you,
Helmi rakim

Hello @helmirakim,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

body header#masthead {
    position: absolute !important;
    background: transparent !important;
}

div.header-image > img.header-inner {
    min-height: 200px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

thanks, the code work

i already fix the other page problem and its working well however the front page still have the same problem like before here is some link for

front page problem

how can i put the slider text slightly below the button menu in mobile view while it doesnot effect the front page in desktop view?

Hello @helmirakim,

Here is how I see your website on low resolution:

Have you already resolved this issue?

Kind Regards, Roman.

body header#masthead {
    position: absolute !important;
    background: transparent !important;
}

div.header-image > img.header-inner {
    min-height: 200px;
}

@media screen and (max-device-width: 767px){
.text-slider {
			
			margin-top: 50px;
		}
}

im using the above code to change it and its work but only to smartphone but not on iphone the position of the text slider change differently

for max-device-width: 767px the margin top is 50px for android smartphone so it will look exactly like the picture above. but if we view it on iphone and it will look like this

view on iphone

it will be good if the text slider in fixed position regarding the device that we use especially smartphone and tablet

Hello,

It looks like your issue requires some additional coding and testing your own custom CSS code, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

then you can consider this problem is resolve

Okay @helmirakim, have a nice day.

Kind Regards, Roman.