Docs

[David vb]

Hi X Team,

First of all i want to tell you guys again that I really love the theme you build and the support you are giving.

I hope this question falls within the scope of it.

For the website bootuitjes.nl we have a stacked header layout. This works perfectly for the desktop version, but does not leave enough room for the content to show proparly when you land on a landingpage. This is why I would like to display a text instead of the image. Also i would like to display the text besides the mobile menu and than stop displaying the top logo section.

I have added an image as an example of the current situation and the ideal situation. If you guys need any further information, please just ask :).

Copy of the image: http://prntscr.com/e7tuqe

Tnx for the reply

[Lely]

Hello David,

Thank you for the screenshot. Please add the following code on Appearance > Customize > Custom > Edit Global CSS:

@media (max-width: 979px){
.x-logobar{
    float: left;
    z-index: 99999;
  }
.x-btn-navbar{
    float:right;
}
a.x-brand.img:before { /*Feel free to adjust the values here*/
    content: 'BOOTUITJES.NL';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 11px;
    top: -22px;
    color: #ffffff;
    z-index: 9999;
    letter-spacing: initial;
    font-size: 20px;
}
.masthead-stacked .x-brand {
    position: relative;
}
.x-logobar img {
    display: none;
}
}

Hope this helps.

[David vb]

Wow, once again, great support.

It is almost perfect. There is one small thing i would like to change.

If you look on the test website: test.bootuitjes.nl and you check the mobile view, i would like to shorten the menu a litle bit, so the menu takes less space in your screen (and the margin above the menu is as high as below the menu).

See also this print screen: http://prntscr.com/e92u9g

Thank you guys. Keep up the great work!

[Nabeel A]

Hi again,

Please add the following code in your Customizer as well:

@media screen and (max-width: 979px) {
.masthead-stacked .x-navbar {
    max-height: 65px !important;
}
}

Let us know how this goes!

[David vb]

Hi,

I implemented both. Only there are 2 problems now.

– the logo is gone on mobile, but also on the desktop view. How can I make the logo go away only on mobile view?

– The 2nd piece of css code you provided works in a way that the mobile menu also does not come down when pressing the menu drop down (see printscreen: http://prntscr.com/eanvjp). Can this be solved?

[Rad]

Hi there,

Please change this CSS

@media (max-width: 979px){
.x-logobar{
    float: left;
    z-index: 99999;
  }
.x-btn-navbar{
    float:right;
  box-shadow: none;
}
.masthead-stacked .x-navbar {
    max-height: 75px !important;
}
}
  
  
a.x-brand.img:before { /*Feel free to adjust the values here*/
    content: 'BOOTUITJES.NL';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 25px;
    top: -23px;
    color: #ffffff;
    z-index: 9999;
    letter-spacing: 1px;
    font-size: 23px;
  	font-weight: bold;
}
.masthead-stacked .x-brand {
    position: relative;
    }
.x-logobar img {
    display: none;

}

}

To this

@media (max-width: 979px){
.x-logobar{
    float: left;
    z-index: 99999;
  }
.x-btn-navbar{
    float:right;
  box-shadow: none;
}
.masthead-stacked .x-navbar {
    max-height: 75px !important;
}
    
a.x-brand.img:before { /*Feel free to adjust the values here*/
    content: 'BOOTUITJES.NL';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 25px;
    top: -23px;
    color: #ffffff;
    z-index: 9999;
    letter-spacing: 1px;
    font-size: 23px;
  	font-weight: bold;
}
.masthead-stacked .x-brand {
    position: relative;
    }
.x-logobar img {
    display: none;

}

}

If you compared it to the provided CSS above, you closed @media in the middle.

2. Yes, please remove that. You can’t limit the height while you want it to be dynamic.

Thanks!

[Author]

Posts