navigation bar is misplaced when the window gets smaller

[phenomlab]

@crazycells said in navigation bar is misplaced when the window gets smaller:

Hi @phenomlab ,

when I shrink the window, the navigation menu items are misplaced and overlap with the topic title.

This should also be fixed. In fact, a much cleaner way to do this is to remove the float on the navbar class

@media (min-width: 992px) and (max-width: 1199px) {
.navbar-nav {
    float: none;
    margin: 0;
}
}

[crazycells]

@phenomlab I think the bug is still there, when I shrink the window or when I click the search button, the navigation bar icons are still overlapping with the title.

[crazycells]

additionally, the bookmark function is working but it is not filling the heart button… I think it should turn to a dark heart from a light heart to indicate that it is bookmarked… this is how I can see the difference.

[phenomlab]

@crazycells What screen size is this ? The removal of float happens at 992px

[phenomlab]

@crazycells said in navigation bar is misplaced when the window gets smaller:

additionally, the bookmark function is working but it is not filling the heart button… I think it should turn to a dark heart from a light heart to indicate that it is bookmarked… this is how I can see the difference.

fixed

[crazycells]

@phenomlab said in navigation bar is misplaced when the window gets smaller:

@crazycells What screen size is this ? The removal of float happens at 992px

from ~787 to ~1000 px …

below ~787 px , it goes to the mobile view…

[phenomlab]

@crazycells I’ll have another look at this.

[phenomlab]

@crazycells this should be resolved now. I’ve had to adjust the breakpoints in Bootstrap (version 3 which NodeBB uses) to accommodate this, and it’ll fire at anything below 1199px (1000 just looks odd…)

Here’s the modified CSS in case you want it

@media (max-width: 1199px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
  div#nav-dropdown {
    display: none;
}
 .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block {
    display: initial !important;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
    margin-right: -15px !important;
    margin-left: -15px !important;
}
.account .cover {
    background-size: auto;
    background-color: var(--breadcrumb);
    height: 150px;
}
.account .cover .avatar-wrapper {
    top: 80px;
    margin-top: 39px !important;
}
}

Note that there may be other elements that will require adjustment.

Try it out and let me know, but I think this resolves the problem.

NOTE: I’m using var in CSS, so you may want to either remove this line, or replace it with something else

background-color: var(--breadcrumb);

[phenomlab]

@DownPW said in navigation bar is misplaced when the window gets smaller:

the solution I found is to move the icons of the navbar to the left to have more room when you click on the search button

I think perhaps the solution I posted is more elegant - that way, you don’t have to worry about elements shifting when you resize - just a thought

[DownPW]

I always have the same problem when I click on the search button with your code. So I keep mine and add yours for the problem of window redimmension

[phenomlab]

@DownPW sounds good.