[Rex RParticipant]

Is there a way to not use the Mobile Navbar Button in narrow viewports and leave the text menu as is? I have my logo navigation menu centered and I would like it to be consistent in all views. See Crazy God-Faith.

I am just playing right now but I think I can size the menu, and center it all, so it will work in all device viewports. The text also takes up less vertical room. If not, can I center the mobile button separately from the text menu?

I’m having fun, I hope you guys are too. God bless. Here is my Custom CSS so far:

.entry-title:before { content: “” !important; }

.x-navbar .x-brand {
float: none;
display: block;
margin: 0 auto;
width: 325px;
}

.x-navbar .x-nav {
float: none;
display: table;
margin: 0 auto;
}

.x-navbar-static-active .x-navbar .x-nav > li,
.x-navbar-fixed-top-active .x-navbar .x-nav > li {
height: 66px;
}

.x-navbar .x-btn-navbar {
float: none;
width: 54px;
margin: 0px auto;
}

[KoryKeymaster]

Hey Rex,

Lookin’ good! This is definitely possible, you’ll just need to play around with the container around the nav. Something like the following should get you in the right arena, but you’ll need to make some fine-tuning adjustments:

@media (max-width: 979px) {
  .x-nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }

  .x-nav-collapse .x-nav > li {
    float: none !important;
    padding-top: 5px !important;
  }

  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a {
    border: 1px solid transparent !important;
    padding: 0.875em 1.25em 0.825em !important;
    font-size: inherit !important;
    border-radius: 100em !important;
  }

  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover {
    border-color: #dfdfdf !important;
    border-color: rgba(0, 0, 0, 0.075) !important;
    background-color: transparent !important;
  }

  .x-navbar .x-btn-navbar {
    display: none !important;
  }
}

Thanks!

[Rex RParticipant]

Thank you! It works.

Is it possible to keep the text menu horizontal at all viewports? Or at least for the desktop and tablet view down to 768? I am thinking that I will keep the menu short and simple and make it work on all viewports. Or else, I will at least tighten the vertical spacing.

I am thinking of something real clean and simple for this new site.

Great job guys. Go home, or if you are home, go to bed. Rex

[RubinKeymaster]

Hey Rex,

if you want to have them float left all the time then you would have to replace the code to:

@media (max-width: 979px) {

  .x-nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }

  .x-nav-collapse .x-nav > li {
    float: left;
    padding-top: 5px !important;
  }

  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a {
    border: 1px solid transparent !important;
    padding: 0.875em 1.25em 0.825em !important;
    font-size: inherit !important;
    border-radius: 100em !important;
  }

  .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover {
    border-color: #dfdfdf !important;
    border-color: rgba(0, 0, 0, 0.075) !important;
    background-color: transparent !important;
  }

  .x-navbar .x-btn-navbar {
    display: none !important;
  }

}

In addition to that if you want that it stops floating at a mobile level add following:

@media (max-width: 480px) {

  .x-nav-collapse .x-nav > li {
    float: none !important;
    padding-top: 5px !important;
  }

}

Hope this helps! If you need anything else or have any problems or questions about this feel free to ask me at any time!

[Rex RParticipant]

Perfectamundo!! Say Hello to my favorite City and my favorite Bridge. I grew up there.

[RubinKeymaster]

Glad everything works now. If you need anything else let me know!

[Author]

Posts