Docs

[Starkilla]

Hello everyone,
I have added a custom topbar menu on my page:

Start

But that menu doesn’t look that good when you visit the site on a mobile device. I was searching for ways to fix that but i am not having progress there. Is it possible to have the topbar stack with the footer on a mobile device maybe? Or do you have any other ideas to make that look better on mobile?

Regarding breadcrumbs:
The breadcrumbs are really small and hard to read. Is there a way to make them bigger?

And another question 🙂
Is it possible to maybe move the mobile menu button to the left of the logo or above it and not in the middle but on the left side?

Sorry for the many questions and i hope you can help me somehow. Really love the theme and look forward to you answers!

Greetings,
Frank

[Rue Nel]

Hello Frank,

Thanks for writing in!

To make the breadcrumbs bigger, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-breadcrumbs {
    font-size: 12px;
}

To move the mobile menu to the right side of your logo, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-stacked .x-btn-navbar {
    float: right;
    margin-top: -80px;
}

And just a simple suggestion for your topbar menu, maybe you can make use of this code:

@media(max-width: 979px){
  .top-menu {
      float: none;
      width: auto;
      margin: 0 auto;
      text-align: center;
  }

  .top-menu li {
      text-align: center;
  }

  .top-menu li a {
      padding-left: 3px;
      padding-right: 3px;
  }
}

Hope this helps.

[Starkilla]

Wonderful help! Thanks alot! Exactly what i needed 🙂

[Rad]

You’re always welcome 🙂

[Author]

Posts