@phenomlab said in Footer bar add center text:
div#console-nav-tab
Ah ok test with bottom: 0px !important; idem
Hi @phenomlab ,
when I shrink the window, the navigation menu items are misplaced and overlap with the topic title.
@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);
the same is happening when I search for something in a larger window.
@crazycells what screen size does this happen in ? Iโd expect some overlap if the size is outside of the standard viewport ranges. The standard ones in use here are applied of course.
@phenomlab it happens right below 1000 px.
Since we had a similar problem before, I came up with this solution:
@media (min-width: 768px) and (max-width: 991px) {
.nav > li > a {
padding-right: 6px;
padding-left: 6px;
}
.unread-count::after {
left: 15px;
top: 11px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.nav > li > a {
padding-right: 11px;
padding-left: 11px;
}
.unread-count::after {
left: 21px;
top: 11px;
}
}
So, in order not to push whole navigation bar items to the second raw, the distance between them is re-adjusted.
But normally, when the items are put in the second row, everything including the topic title and posts is pushed down accordingly. But here it is different, it is overlappingโฆ
@crazycells Thanks. Iโll need to investigate this.
@phenomlab additionally, โmark all readโ option at the bottom of the notification panel looks completely white and not visible, FYIโฆ
@crazycells thanks. Can you let me know which theme youโre using ? I think this is from the adjusted core css but want to be sure.
@phenomlab said in navigation bar is misplaced when the window gets smaller:
@crazycells thanks. Can you let me know which theme youโre using ? I think this is from the adjusted core css but want to be sure.
I am using the default one.
@crazycells said in navigation bar is misplaced when the window gets smaller:
@phenomlab said in navigation bar is misplaced when the window gets smaller:
@crazycells thanks. Can you let me know which theme youโre using ? I think this is from the adjusted core css but want to be sure.
I am using the default one.
the same thing for โDiscardโ buttonโฆ
@crazycells thanks. That explains my suspicion. Iโll need to address that as the themes inherit from the custom core.
I have the same things for the navbar when I have a lot of icons on the left.
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 and no longer have this rather annoying phenomenon
/*left*/
@media (min-width: 768px) {
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
margin-right: 0;
margin-left: -40px;
}
}
/*right*/
@media (min-width: 768px) {
.navbar-right {
float: right!important;
margin-right: -45px;
}
}
@crazycells said in navigation bar is misplaced when the window gets smaller:
@phenomlab additionally, โmark all readโ option at the bottom of the notification panel looks completely white and not visible, FYIโฆ
This has been fixed
@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;
}
}
@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.
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.
@crazycells What screen size is this ? The removal of float
happens at 992px
@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
@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โฆ
@crazycells Iโll have another look at this.
@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);