Docs

[bluetroop2]

http://ere.bluetroop.com/

Please see this site as it goes to a smaller screen. The customer says the mobile menu is appearing too soon and the positioning is incorrect. It currently sits on top of the hero slider versus floating. Also, they’d like the menu to be accessed from in the top right corner to be consistent with the rest of their other web-sites. (*see my screen samples).

Also, can you tell me how to arrange the text (date/location) on the upper right to be positioned as one line of text below the logo when going to mobile screens? Thank you in advance!

[Rad]

Hi there,

Thanks for posting in.

The mobile menu starts appearing on 979px width, which is equivalent to Tablet’s portrait view. Do they wish to display mobile menu on mobile only?

Would you mind providing your login credentials? I like to check your topbar’s content. For the meantime, please avoid using <p></p> within topbar’s content. It will break the layout.

Thanks!

[bluetroop2]

This reply has been marked as private.

[Lely]

Hello There,

Thank you for the credentials.
Please try adding the following CSS on Appearance > Customize > Custom > Edit Global CSS:

@media (max-width: 480px){
.masthead-stacked .x-btn-navbar {
    display: inline-block !important;
    float:right;
  
}
  .x-nav-wrap.desktop {
    display: none !important;
}
}

@media (max-width: 979px){
.masthead-stacked  .x-btn-navbar {
    display: none;
  
}
  .x-nav-wrap.desktop {
    display: block;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 979px) {
.masthead-stacked .x-btn-navbar {
    display: inline-block;
    float:right;
}
.x-nav-wrap.desktop {
    display: none;
}
}

Above CSS will display mobile menu on mobile only and on screensize <=480px when you resize the browser.

For topbar content, please update your content to this:
<a href="http://ere.bluetroop.com"><img src="http://ere.bluetroop.com/wp-content/uploads/2016/11/PageTopBarLogo.png" alt="ERE Media Spring 2017 Recruiting Conference"></a><span><font size="3" color="000000"><b>Apr 18-20, San Diego, CA</b></font></span>
Then add the following custom CSS too:

.x-topbar .p-info{
    width:100%;
}
.x-topbar .p-info a {
    display: inline-block;
    float: left;
}
.x-topbar .p-info span {
    display: inline-block;
    float: right;
} 

Hope this helps.

[bluetroop2]

Thank you, I think it looks great! I’ll show it to the client.

[Nabeel A]

Glad we could help 🙂

Cheers!

[bluetroop2]

They said the date looks better, and the menu is moved a little to the right but it still sits on the slider. Can we add more space below it to get it off the slider? What CSS should I use?

[Rue Nel]

Hello There,

Thanks for updating in! To add more space above the slider, please edit the page back in Cornerstone. In the section setting, please add a top margin so that the margin will create some space above the slider.

Hope this helps. Please let us know how it goes.

[bluetroop2]

Is there a way we can reposition the mobile menu icon to be vertically centered in the gray bar, AND for the gray bar to also serve as the TOP row on a mobile screen, NOT the 2nd row? Again, only when a mobile menu is present.

Please see the attached image as a guideline. Can you help?
Thanks in advance?

[Nabeel A]

Hi again,

You can align the button vertically but re-positioning of the gray bar might not be possible without custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

To align the mobile button, add this code in your Customizer:

.x-btn-navbar {
    margin: 10px 0 !important;
}

Thanks for understanding. Take care!

[Author]

Posts