Docs

[nolasmiles]

Hi! First off, just wanted to say that designing with X and Cornerstone has been an amazing experience. I’ve never tried to build a website before, and I’m amazed at the versatility of Themeco’s tools and design! I also really appreciate the amazing support that you guys provide, as I’ve already implemented quite a bit of custom CSS and JS thanks to your work in the support forum.

The issue I’d like help with is the layout of the mobile menu navbar, if possible. Please see the attached screenshot to get an idea of what I’d like to reproduce in our design.

Our website is nolasmiles.info and I can certainly use the default mobile menu navbar design, but I figured it wouldn’t hurt to ask.

[Paul R]

Hi,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[nolasmiles]

Sure thing, I’ll try to clarify.

Right now, our website’s mobile navbar displays only one button which we’ve labeled as “MENU”. Given the screenshot I attached, do you see how their designer placed multiple menu icons (phone, calendar, map marker and hamburger) in their mobile navbar?

I was just wondering if such a design was possible in X. If we can only have one button on the mobile navbar, I can design around that but I just wanted to know my options before proceeding.

Hope that makes more sense, and thanks for the quick reply!

[Rupok]

Hi there,

Thanks for clarifying. It would be a better approach if you place these within Topbar. You can enable and place content on Topbar from Customizer > Header > Miscellaneous.

You can hide the Topbar for desktop and show on mobile only by media query if you only want this for mobile device.

Hope this helps.

Cheers!

[nolasmiles]

I figured the Topbar would be a viable alternative, so thank you for confirming that option. If you don’t mind, could you help me with two related questions?

Is it possible to vertically center content placed in the Topbar?

Also, how do I alter the breakpoint for the mobile menu? I’ve tried some of the CSS offered in other posts, but the mobile menu was unaffected. I’m sorry I don’t have specific examples of code that didn’t work, but I’m willing to try whatever you suggest.

Thanks again for your help!

[Nico]

Hi There,

Little confuse of the concerned customization for your top bar. Would you mind clarifying vertically centered content.

Check the link below to adjust the breakpoint for mobile menu.

https://community.theme.co/forums/topic/adjust-breakpoint-for-mobile-menu/

Hope it helps.

Let us know how it goes.

Thanks.

[nolasmiles]

It looks like I’ve got the mobile menu breakpoints fixed now with the following code:

@media (max-width: 480px) {
.masthead-inline .x-btn-navbar {
  display: block;
  float: right;
}
}
@media (min-width: 481px) {
.x-nav-wrap.desktop {
  display: block;
}
.x-btn-navbar,
.x-btn-navbar.collapsed,
.masthead-inline .x-btn-navbar {
  display: none;
}
}

I think I’ll manage to avoid using the Topbar in my design, so that’s all I needed help with for the time being. Thanks for the great support – you guys rock!!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts