Footer Navbar Overlaps Content

Question

So I have a website that looks like this:

(I censored it a little, it's super secret)

Now in full screen on PC this looks just fine but watch what happens when I shrink it down to Mobile Size:

I can no longer reach the bottom and see the three buttons. After experimenting it appears that the buttons shrink down to a very small size and then the bottom navbar overlaps.

<div class="categories-container">
    <div class="container">
        <div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these Core Categories!</div>
        <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <div class="btn-group" role="group" style="padding-right: 10px">
                <button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn"></button>
            </div>
            <div class="btn-group" role="group" style="padding-right: 10px">
                <button type="button" class="btn btn-warning btn-bg" id="category-editor-btn"></button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-danger btn-bg" id="category-engine-btn"></button>
            </div>
        </div>
    </div>
</div>
<div class="footer-container">
    <div class="navbar navbar-default navbar-fixed-bottom">
        <div class="container" style="text-align: center">
            <span>Website made possible with the following tools</span>
            <br>
            <span>
                <a href="http://https://jquery.com/">jQuery</a> | <a href="http://getbootstrap.com/">Bootstrap</a> | <a href="http://glyphicons.com/">glyphicons | <a href="https://pages.github.com/">Github Pages</a></a>
            </span>
        </div>
    </div>
</div>

This should be the code you need. If you require more let me know.

EDIT

CSS Below:

body {
    background-color: #0ba7ff;
}

.header-container .jumbotron {
    background-color: #0ba7ff;
    border-color: #ffffff;
    border-style: solid;
    color: #ffffff;
    text-align: center;
}

@media (max-width: 767px) {
    .jumbotron.jumbotronic {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.categories-container .btn.btn-bg {
    height: 300px;
    font-size: 60px;
    white-space: normal;
}

@media (max-width: 767px) {
    .categories-container .btn.btn-bg {
        height: 150px;
        font-size: 30px;
    }
}
@media (max-width: 480px) {
    .categories-container .btn.btn-bg {
        height: 75px;
        font-size: 22px;
    }
}
@media (max-width: 360px) {
    .categories-container .btn.btn-bg {
        height: 35px;
        font-size: 15px;
    }
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
.tooltip:hover:before,
.tooltip:hover:after{
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 160px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}

.tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
}

Loaded after bootstrap.css

score 1 · Accepted Answer · answered Nov 02 '15 at 01:01

1

It appears you're using bootstrap. I don't know the coding of your css file but if you do happen to set a height for .categories it'd tend to overlap. Try give it a .row class and .col-sm-13 for the buttons to remain inline. Once it reaches the screen of a mobile device it won't overlap. Try. I hope this helps or gives you an idea :)

<div class="categories-container">
<div class="container">
    <div class="h1" style="color: #ffffff;text-align: center;">Or Click One of these Core Categories!</div>
    <div class="row">
    <div class="btn-group btn-group-justified col-sm-12" role="group" aria-label="...">
        <div class="btn-group" role="group" style="padding-right: 10px">
            <button type="button" class="btn btn-success btn-bg" id="category-gameplay-btn"></button>
        </div>
        <div class="btn-group" role="group" style="padding-right: 10px">
            <button type="button" class="btn btn-warning btn-bg" id="category-editor-btn"></button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-danger btn-bg" id="category-engine-btn"></button>
        </div>
    </div>
    </div> <!-- row-->
</div>

answered Nov 02 '15 at 01:01

Hassane Fall

114
8

I tried your suggestion but no dice. Would this change only appear on a mobile device and not on PC when I make the window smaller? I will add the CSS I got, give me a second :) – OmniOwl Nov 02 '15 at 01:06
Added the CSS that I got. – OmniOwl Nov 02 '15 at 01:09
This change will appear only on a mobile device if you set it to "col-sm-*". Doing "col-xs-*" would allow the buttons to remain inline. If you're using bootstrap it reduces the size of the buttons cause it's responsive to screen size. – Hassane Fall Nov 02 '15 at 01:12
Yeah I am using Bootstrap, that's why I put it in the tags :) . Okay I guess I will try upload and check it on my phone. – OmniOwl Nov 02 '15 at 01:14
Your code seems fine but if you still can't see the 3 buttons maybe test by adding another div below your buttons. – Hassane Fall Nov 02 '15 at 01:25
Nope, didn't help it. I looked at the issue on Google before posting and it seems that the problem potentially could have been fixed by adding a navbar-static-bottom just like there is a corresponding navbar-static-top but it was ultimately decided against for what reason I do not know. – OmniOwl Nov 02 '15 at 01:32
Maybe restart your code all over again without the media queries and set each div with col-sm-12. Sorry if i wasn't to helpful. you'll figure it out :) – Hassane Fall Nov 02 '15 at 01:47
I ended up not using the Bootstrap footer at all. I checked around on the net and after much struggle I ended up making my own. – OmniOwl Nov 02 '15 at 02:09
Thanks for trying though! – OmniOwl Nov 02 '15 at 02:17

score 0 · Answer 2 · answered Nov 02 '15 at 02:16

So here is the solution for anyone else looking after a fix for this:

There was none from what I experience, make your own:

This is necessary to add:

body {
  height: 100%;
}

Here is the CSS for the div which holds the three buttons in question (so basically the last container in your HTML document before the footer):

.categories-container {
  min-height: 100%;
  margin-bottom: -30px; /* Negative half the height of the footer to leave space*/
  position: relative;
}

Then I made this at the bottom of my index.html page:

<div id="wrap">
    <div id="main"></div>
    <div id="footer">
        <a href="http://https://jquery.com/">jQuery</a> | <a href="http://getbootstrap.com/">Bootstrap</a> |
        <a href="http://glyphicons.com/">glyphicons | <a href="https://pages.github.com/">Github Pages</a></a>
    </div>
</div>

Here is the footer CSS:

#wrap #footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #f8f8f8;
    text-align: center;
}

#wrap #footer a {
    padding-top: 30px;
}

#wrap #main {
    height: 60px;
    clear: both;
}

I hope this was useful for some!

Footer Navbar Overlaps Content

2 Answers2