Docs

[ATCompressors]

Good morning,

I have a couple of queries, but they all relate to the navbar.

First of all, I previously contacted Themeco with assistance to make my navbar transparent; all works super duper and no problems there.
(url: https://community.theme.co/forums/topic/transparent-navbar-to-solid-colour/)

More recently, I went through another forum thread to place the logo in the centre of the navigation
The CSS works fine when in the customizer, but when I copy and paste it into my Child Theme CSS, everything on my website aligns to the left.
(url: https://community.theme.co/forums/topic/making-logo-be-in-the-middle-of-the-nav-bar/).

The CSS I’m using the centre the logo is the following:

/* center logo */
@media (min-width: 980px) {
  .x-logobar {
    display: none !important;
    visibility: hidden !important;
  }
  .x-navbar .x-nav > li.logo-menu-item > a {
    text-indent: -99999px;
    text-align: left;
    width: 120px;
    height: 62px;
    background: url(http://aandtcompressors.com/wp-content/uploads/2016/09/AT-Logo-Square-200.png) no-repeat center center;
    background-size: contain;
  }
}

.x-navbar .desktop .x-nav > li#menu-item-539 > a:hover, .x-navbar .desktop .x-nav > #menu-item-31.x-active > a, .x-navbar .desktop .x-nav > #menu-item-31.current-menu-item > a {
  box-shadow: none;
}
.x-navbar .x-nav-wrap .x-nav > li:not(#menu-item- > a {
    padding-top: 30px;
}

Also, when checking out my website in a mobile view in the developer tools, my logo and navigation are both centre, but one above the other. I would rather the logo float to the left and the burger menu float to the right.
I understand that my centred logo was part of a menu item, so I have hidden that on mobile view with the following CSS:

@media(max-width: 786px) {
.logo-menu-item {
  display: none;
}
}

Website URL: http://aandtcompressors.com/home

Thank you. 🙂

[Paul R]

Hi,

Please set your navbar layout as inline instead of stacked.

You can set it under Header in the customizer.

Thanks

[ATCompressors]

I changed it to “stacked” because otherwise the site logo appears and the menu aligns to the right.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 769px) {
.x-brand img {
     float: left;
}

.x-btn-navbar, .x-btn-navbar:hover, .x-btn-navbar.collapsed, 
.x-btn-navbar.collapsed:hover {
      float: right;
      margin-top: -60px;
      font-size: 20px;
      box-shadow: none;
      background: none;
}
}

Hope it helps

Joao

[ATCompressors]

This reply has been marked as private.

[ATCompressors]

This reply has been marked as private.

[Lely]

Hi There,

Upon checking, you current logo is stacked at the moment. Then I tried adding the code suggested by Jaoao on the browser and it works. It doesn’t need to be inline for the code to work. Please apply the code then give us a video screencast of the issue so we can see your issue.

[ATCompressors]

Hi,

Sorry for the confusion, but that you for your patience with me.

The following image is with “stacked” enabled.
This layout is exactly what I want on desktop.

The following image still has stacked enabled on mobile, but it’s not the layout I want.
I want the logo and the menu to be side-by-side.

The following image is with “inline” enabled.
I really don’t want this layout. I don’t want two logos. I only want one logo in the centre and everything else to be centred too; just like the layout for the “stacked” on desktop.

The following image has inline enabled on a mobile layout and it’s exactly what I’m after on mobile.

Maybe it would have been clearer to ask, is it possible to have the Stacked layout enabled only for desktop and the inline layout enabled only for mobile?

Again, thank you for your help. 🙂

[Christopher]

Hi there,

Please change logo and navigation layout to ‘inline’ and add following CSS :

@media (min-width:979px){
a.x-brand.img {
    display: none;
}

.masthead-inline .desktop .x-nav {
    float: none;
    display: table;
    margin: 0 auto;
}
}

Hope it helps.

[Author]

Posts