Header making section 1 text element disappear in tablet view

Support
#1

Hi there,

Can you please tell me how to fix my header?
It looks great in desktop and mobile view but in the middle transition (about tablet size) the menu expands below the logo making it too wide and blocking my titles.

Thank you!

#2

Hi There,

Please add the following code to Theme Options CSS

@media(min-width: 969px) and (max-width:1200px) {
.x-brand img {
   
    width: 150px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 15px;
    padding-right: 15px;
    
}}

Hope it helps

#3

Thank you. Could you please explain what the problem is and what I am doing to solve it by adding the code? I don’t want to just add the code and move on without knowing what it impacts and how. This will cause problems later if I change something in my header.

Thank you so much!

#4

Hi there,

The text Depth to Water does not disappear, it only gets covered by the header area as the device width gets smaller because the header area is not enough to contain the logo and the menu items in one line in certain device width.

The code previously suggested makes the logo width smaller and lessens the spacing between the menu items thus making more room for the contents of the header area displaying them in one line.

Hope this helps.

#5

It wasn’t working well, so I changed the code to this:

@media(min-width: 500px) and (max-width:1300px) {
.x-brand img {
   
    width: 150px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 15px;
    padding-right: 15px;
    
}

This has solved most of the sizing issue, but I do still see it for a little bit at about 790px width.
Is there any way to fix that?

Thank you!

#6

Hi There,

The code you applied affects everything between 500px and 1300px so you should not experience the issue at 790px.

I have tested on my end and seems to work correctly.

Please clean your browser cache and test it again.

Thanks

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.