Reply To: Floating navbar problem

Home Forums Support Floating navbar problem Reply To: Floating navbar problem

Home Forums Support Floating navbar problem Reply To: Floating navbar problem

#107261
Adrian Cojocariu

Ok, did a fresh install on

TestSite

It’s basically the same.

You can zoom in to see the effect in action.

This is the CSS


/* Enter Your Custom CSS Here */
.afterheader {
  border-style:solid;
  border-color:#020202;
  border-width:10px;
}

.main-navigation {
  margin-top:15px;
}

@media (max-width:915px) {

.main-navigation {
  max-width:540px;
}

.nav-float-right  .main-navigation {
  float:none;
  margin-bottom: 20px;
  margin-right:auto;
  margin-left:auto;
}

.site-header {
  text-align:center !important;
}
}

@media (min-width:769px) {
.main-navigation, .main-navigation ul ul {
   background: transparent;
}

.main-navigation .menu > li {
   margin-right: 5px;
   background-color:#000000;
}

.main-navigation .menu > li:last-child {
            margin-right: 0;
      }
}

So basically I’m satisfied …

Instead of reading further, maybe this is possible. I want the navigation menu under the header for tablet and mobile.

At the 915px and below break point, can’t I simply change the navigation menu from floating right to below the header through CSS ?

This would basically fix everything I guess, it will stay centered, and it will be below the header, just as I want it.

If not, then maybe just make it stack under the header, but without the script, because it loads it slow and it seems it bugs out.

Regarding my current CSS, if nothing above is possible …

I want to use something else instead of :


.main-navigation {
  max-width:540px;
}

Something like make the margin/padding of the navmenu end exactly where the last menu item in the right ends.

|starts here|MenuItem MenuItem MenuItem MenuItem|ends here|

Wutever I think u get the idea.

It already starts there in the left, but ends a lot further in the right.

Basically the margin left and right : auto works, it centers the navmenu, but because the navmenu margin in the right is bigger ( there is whitespace between the last nav item and the end of the navmenu ) it looks like it’s “to the left, to the left”.

I fixed this by approximating max-width, can I instead limit the margin/padding ?

Also, this only works with fluid navigation layout in the customizer.