Site behavoir with different widths

[valeoadmin]

Hi there,

I had a question about how the nav bar behaves at different widths and where on the site that is getting triggered. There is an an awkward phase between normal full site on desktop and very narrow site on mobile where the nav bar does not look good.

On dev.valeonetworks.com between 1000 px site width and 1400 px site width, the logo area and the nav buttons are stacked in an ugly way(http://prntscr.com/n4rkbp).

How would I change the site so that when it gets to 1400px or less it just switches to the mobile nav bar with the three line icon to click so we don’t have this stacking effect?

Thanks!
Ryan

[mldarshana]

Hi Ryan,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (min-width:678px) {
  .x-brand::after {
    font-size: 12px;
  }
}

Hope that helps.

[valeoadmin]

Hey mldarshana,

Thank you for trying but it didn’t seem to make a difference. Just to clarify we want the nav bar to switch to the mobile style if width is less than 1400px.

Thanks!

[rad]

Hi Ryan,

In that case, please replace that CSS with this

    @media ( max-width: 1399px ) {
     .x-nav-wrap.desktop {
         display: none;
     }
     .x-btn-navbar {
         display: block;
         float: right;
     }
.x-nav-wrap.mobile:not(.x-collapsed) {
    display: block;
}
    }

Thanks!

[valeoadmin]

Awesome, thats exactly what I was looking for.

It looks like we may need to do something similar with this section

.x-brand::after{ content: "Sales@valeonetworks.com   |  888.806.3601 " ;
  color: #fff;
	margin: 0px 0px 0px 15px;
  font-size: 14px;
  font-family: "Lato",sans-serif;
  letter-spacing: 0.2em;
  height: 100%;
  position: relative;
  top: -5px;
  
}

When viewed on a phone it looks like this http://prntscr.com/n6zcqa

Is it possible to setup some sort of function that just hides the whole .x-brand::after section below a certain pixel width?

Thanks!

[rad]

Hi Ryan,

Sure, that’s fully doable , example

@media ( min-width: 980px ) {

.x-brand::after{ content: "Sales@valeonetworks.com   |  888.806.3601 " ;
  color: #fff;
	margin: 0px 0px 0px 15px;
  font-size: 14px;
  font-family: "Lato",sans-serif;
  letter-spacing: 0.2em;
  height: 100%;
  position: relative;
  top: -5px;
  
}

}

This make sure it’s only implemented above 980px width.

Thanks!

[valeoadmin]

Thanks Rad!

I noticed something that may have been caused by our initial changes. When we click the drop down menu on a narrow screen like a phone, the menu options are all the way on the left instead of the right near the drop down, http://prntscr.com/n84836

I tried a bunch of ways to get it over to the right with flex box but I’m not sure I was even calling the right class so I deleted it out of shame.

What would be the best way to move that stuff over?

Thanks!
Ryan

[rad]

Hi Ryan,

You mean aligning the drop-down menu items to the right under the mobile menu icon? You can add this CSS too.

.x-navbar .mobile .x-nav li>a {
    text-align: right;
}

Your screenshot is correct so I assumed you’re referring to menu texts alignment.

Thanks!

[valeoadmin]

You’re correct and thanks for the code! Out of curiosity is there any way to change the menu so the background is only showing up in the little area where the menu items are and not covering the entire web page when you click the drop down?

Thanks!
Ryan

[paul.r]

Hi Ryan,

Yes, there is a way. You can try adding the code below in Theme Options > CSS

@media (max-width: 979px) {
.x-navbar {
    height: 65px;
    padding-right:0;
}

.x-navbar  .x-brand {
    padding-left: 0;
}

.x-navbar  .x-container.max {
    max-width: 90%;
}

.x-navbar .mobile .x-nav li>a {
    background:transparent;
}
.x-navbar .mobile .x-nav {
    background: rgba(0,0,0,0.7);
    width: 160px;
    margin: 0 0 0 0;
    float: right;
}
}

Hope that helps

[valeoadmin]

Thanks Paul!

This is exactly what I was looking for.

[Prasant]

You are most welcome.