[TsavoParticipant]

Hello,

I’d like to move my navbar links down, but keep the logo in the exact same place in my vertical, left side navbar. What is the correct CSS to do this?

Website: http://staging.bausvault.com/
Menu I’m aiming for: http://pinerivercapital.com/

Thanks!

[JadeModerator]

Hi Tsavo,

As I have checked on your page, there seems to be not much space left on the navigation if you move down the menu links. But in case you still want to shift them lower, please check on these CSS selectors:

.x-navbar .desktop .x-nav > li > a {
    /* You can adjust the padding here for the menu items if you want to decrease the height or font size */
}

.x-navbar-fixed-left .desktop .x-nav {
    margin-top: 30px; /* Adjusts the gap between the logo and the first menu item */
}

Hope this helps.

[TsavoParticipant]

Thanks, I applied this CSS to my website. Problem is, the menu items are not responsive, and I would like them to move up as the browser window changes, like http://pinerivercapital.com/ (note how the menu moves up as the browser is made smaller from the bottom).

Website: http://staging.bausvault.com/
Menu I’m aiming for: http://pinerivercapital.com/

[TsavoParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Tsavo,

Thank you for the admin credentials. You may add the following CSS:

.x-navbar-fixed-left .x-navbar-inner, .x-navbar-fixed-right .x-navbar-inner {
     position: absolute;
    bottom: 0;
    height: auto;
}

Then remove this custom CSS:

.x-navbar-fixed-left .desktop .x-nav {
   margin-top: 265px;
/* Adjusts the gap between the logo and the first menu item */
}

Please note that what you to achieve here will cause some of the content of the menu to be hidden.

Hope this helps.

[TsavoParticipant]

Thanks, almost there. Last thing would be to get the logo back to the top of the navbar, as with the new CSS the logo has been pushed down to the middle.

[TsavoParticipant]

This code seems to have done the trick…

.x-brand img {
  margin-bottom: 4.5em;
}

But I’m not sure if this is the most responsive CSS to accomplish this. Please let me know!

Thanks

EDIT: Also, this bit of CSS

.x-navbar-fixed-left .x-navbar-inner, .x-navbar-fixed-right .x-navbar-inner {
     position: absolute;
    bottom: 0;
    height: auto;
}

…seems to make the navbar disappear on mobile. What’s a good way to fix this?

Thanks in advance!

[LelyModerator]

Hello Tsavo,

Please update this:

.x-navbar-fixed-left .x-navbar-inner, .x-navbar-fixed-right .x-navbar-inner {
     position: absolute;
    bottom: 0;
    height: auto;
}

To this:

@media (min-width: 980px){
.x-navbar-fixed-left .x-navbar-inner, .x-navbar-fixed-right .x-navbar-inner {
     position: absolute;
    bottom: 0;
    height: auto;
}
}

Please remove this :

.x-brand img {
  margin-bottom: 4.5em;
}

That will hide your logo on page load. Please note that this is the limitation of fixed side menu. There’s not enough space to display everything.

Hope this helps.

[TsavoParticipant]

Thank you. So I have to choose between the responsive menu links or having the logo up top in its original place, but non responsive navbar links? Just want to make this clear before I explain it to my client.

/* NAVBAR SPACING */

@media (min-width: 980px){
.x-navbar-fixed-left .x-navbar-inner, .x-navbar-fixed-right .x-navbar-inner {
     position: absolute;
    bottom: 0;
    height: auto;
}

(blue arrow indicating where logo originally was)

[FriechModerator]

Hi There,

I am another support and Im not sure what do you want to do here. The left navbar does not look good on big screens.

Do you need the menu to be on absolute bottom and the logo to be on absolute top, regardless of the screen size? If so replace your previous css code with this

@media (min-width:  980px) {
	.x-navbar .x-brand {text-align: center;}
	.x-brand img  {max-width: 65%;}
	.x-navbar-inner .x-container {height: 100%;}
	.x-nav-wrap.desktop {position: absolute;bottom: 0;}
}

Or do you only want to keep the logo on the top, and space out the menu a little bit?

You can Add this instead

@media (min-width:  980px) {
	.x-navbar .x-brand {text-align: center;}
	.x-brand img  {max-width: 65%;}
	.x-nav-wrap.desktop {margin-top: 4.5em;}
}

Feel free to adjust those values.

Hope it helps, Cheers!

[Author]

Posts