Logo on navbar

Support
#1

On the header, I have the logo layout set as Inline, yet when I’m not in mobile view or max res, the logo (navbar-wrap) is above the menu (navbar). How do I get the logo to stay on the navbar fully responsive in each view size?

Thanks

#2

Hi @jbutler97,

Thanks for writing in.

Upon checking your setup I could see that your logo is looking great in every device. Would you mind sharing us details on what you want to achieve.

Thanks.

#3

The following picture is full screen.

The next picture is without the browser maximized.

I would like the logo to stay inline. Addtionally, I would like the client login button so stay on the same line as the other menu options.

#4

Hello @jbutler97,

Thanks for updating the thread with relevant screenshots. Hope you are having a great day :slight_smile:

On certain screen sizes there is a problem with logo, menu and Client Login button alignment. To fix that, you can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 1274px) and (min-width: 980px)  {
a.x-brand.img {
    float: left;
    width: 12%;
}

nav.x-nav-wrap.desktop {
    width: 82%;
    float: left;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px;
    padding-right: 5px;
}
}

@media only screen and (max-width: 1024px) and (min-width: 980px)  {.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 2px;
    padding-right: 3px;
}}

Let us know how it goes.

Thanks.

#5

It worked on all of the sizing with the exception of one. As I was shaping the browser window, everything was responsive until I hit the following size.

#6

Hi there,

I checked any possible size with my Google Chrome browser using my Macbook and I could not replicate the screenshot you gave.

Would you please enable the developer toolbar of the Chrome browser and click on the responsive icon and tell us teh exact pixels you are in the screenshot?

You can check the articles below to know what I am talking about:

Thank you.

#7

and

#8

Hello There,

Thanks for sending out the screenshot. Please have the given custom css updated and use this instead:

@media only screen and (max-width: 1300px) and (min-width: 980px)  {
  a.x-brand.img {
    float: left;
    width: 12%;
  }

  nav.x-nav-wrap.desktop {
    width: 82%;
    float: left;
  }

  .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 980px)  {
  .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 2px;
    padding-right: 3px;
  }
}

Please let us know if this works out for you.

#9

I think that actually made the problem worse, so I’ve reverted back to the original css, which still displays the two problematic screen sizes.

#10

Hi there,

The problem with your current setup is the amount of menu items and the logo width. Its total width surpasses the 1300px which is harder to shrink down. And the tablet size is around 979px.

The solution would be removing some of your menu items, or change the font size of your menu which will make it unreadable, imagine a 1300px width is being suppressed up to 979px.

But please try adding this CSS, it should at least improve its responsiveness :slight_smile:

.x-navbar .desktop .x-nav > li > a {
    font-size: calc( 10px + 0.2vw );
}

Thanks!

#11

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