Header and responsive problems

Hi Experts,

could you help me with 2 problems I have with my website:

  1. in topic https://athemes.com/forums/topic/header-text-and-background-colour-change/ Roman, helped me customise my header, but I realised that header doesn’t display properly on smartphones, tablets and when I resize a mozzila window. I would like header to move with scrolled page down and to has the same features like on full open mozilla window.

smartphone

  1. my second problem concerns responsive issue. I would like to have a responsive text in Layout Builder (inside I have visual editor) on all pages like on main page.

Thanks for any help !

Regards,

Paul

Hi,

You can make the header to scroll on mobile too with this Custom CSS:

.site-header.float-header {
    background-color: white !important;
}

.site-header.float-header .btn-menu {
    color: black !important;
}

.site-header.float-header .site-title a {
    color: black !important;
}

@media only screen and (max-width: 991px) {
.site-header.fixed {
    position: fixed !important;
}
}

Please clarify what you meant by “to has the same features like on full open mozilla window”, so I can check how to do that too.

  1. What is the issue with the text? You want to change the font-size on different screen-sizes, or what you want to achieve with that responsive text? Please clarify.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

thanks a lot for your code, works very well. Could you help me with 2 more features:

  1. I have modified your code to have border-bottom-style. It works proper when I resize mozzila window on pc, but it doesn’t on smartphones.
.site-header.float-header {
    background-color: white !important;
  	border-bottom-style: solid;
    border-bottom-color:lightgrey;
    border-bottom-width:0.4px;
}
  1. Is it possible to insert menu bar on the right side of the page when I browse it on smartphones ?

Regarding text I would like to have text to wrap without overlap when I resize the mozzila window. The text will be insert in Layout Builder

Before
before

After
after

Regards,

Paul

Hi,

  1. In place of this:
border-bottom-style: solid;
    border-bottom-color:lightgrey;
    border-bottom-width:0.4px;

try it like this:

border: 0.4px solid lightgrey;

  1. You can move the menu to right and logo to left on mobile with this Custom CSS:
@media only screen and (max-width: 767px) {
.site-title {
    font-size: 26px !important;
    float: left !important;
}

.btn-menu {
    float: right !important;
    margin: 0 auto 0 !important;
}

.header-wrap .col-xs-12 {
    width: 49% !important;
}
}

Please let me know how it works.

Best Regards,
Csaba

Hi,

  1. unfortunately nothing change on mobile, I still can’t see the line. Btw. I would like to have only bottom line not full border.

  2. works fine but I realised that when I extend the menu I can’t close it back becouse is under the submenu, and the only way to exit it is to choose one of submenu websites. Do you have any solution for this ?

Regards,

Paul

Csaba,

can I count for your further support ?

Regards,

Paul

Hi,

  1. I have checked that on iPhone 7 and it works, I do see a 1px grey line under the float header.

  2. Please add back the code I gave you, so I can check, I don’t see that applied.

Best Regards,
Csaba

Hi,

thanks for your reply !

  1. I realised that on some smartphones it doesn’t work but generally it’s ok. THANKS !

  2. This is how I would like to display submenu on smartphones (possibility to see the menu icon to collapse submenu)

this is how is display when I add your code

menu2

@media only screen and (max-width: 767px) {
.site-title {
    font-size: 26px !important;
    float: left !important;
}

.btn-menu {
    float: right !important;
    margin: 0 auto 0 !important;
}

.header-wrap .col-xs-12 {
    width: 49% !important;
}
}
  1. I remove .header-wrap section from your code to display website title like this, but I would like it to be under the drawn red line.

menu3

Regards,

Paul

Hi,

Please add the CSS, so I can check, now you don’t have the CSS applied, apply it, so I can help you to customize it.

Best Regards,
Csaba

Hi,

applied.

Regards,

Paul

Hi,

You can make the logo and menu icon on the sam line with this Custom CSS:

.site-header .col-xs-12 {
    width: 50% !important;
}

actually this part of the above CSS:

.header-wrap .col-xs-12 {
    width: 49% !important;
}

would have to do the same thing, but that I don’t see applied, so better add this Custom CSS:

.site-header .col-xs-12 {
    width: 50% !important;
}

to the first line of your Custom CSS field ( using the recommended plugin ).

Best Regards,
Csaba

Hi Csaba,

as I mention in answer #662353 I intentionally remove wrap section for header, because I would like to display it in one line on smartphones. Code which you provide

.site-header .col-xs-12 {
    width: 50% !important;
}

also wrap header.

Moreover could you refer to point 2 from my previous post, consider overset menu icon by submenu.

Thanks, for you current help !

Paul

Hi,

I can only see that as solution to make the logo and menu to appear on same line, otherwise they would be on different lines, so if you don’t want to use the last CSS I gave you, then you will have the menu like from point 3, how you see it on your screenshot, so logo on line 1 and menu icon on line 2 ( on different lines, since they are different columns in code, making the column 50% width will make them appear o the same line ).

Please try this Custom CSS to fix the dropdown menu positioning after applying the Custom CSS I gave you:

@media only screen and (max-width: 767px) {
#mainnav-mobi {
    top: 40px !important;
}
}

Best Regards,
Csaba

Hi,

many thanks for your proffesional help. Works cool!

Regards,

Paul

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba