Something is wrong with the navbar in the css code? how do I fix this?

I’m trying to figure out how to fix the navbar. I want the homepage navbar to be transparent, but as you scroll down, I want to place a background color in the background as you scroll down.

Can’t seem to figure out what is wrong with my css code. I’m pretty sure it’s my css that’s causing the issue.

http://f13-preview.awardspace.net/groupeezz.dx.am/groupeezz3/index.html

]

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ff13-preview.awardspace.net%2Fgroupeezz.dx.am%2Fgroupeezz3%2Findex.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

and now you have a full time horizontal scrollbar.

Personally, I wouldn’t address the navbar or any other issue until after the page is framed correctly.

1 Like

I do not believe you are using the bootstrap containers according to their instructions.

For example:

    <section id="footer" class="section-padding">
        <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <ul class="list-inline">
                            <li><a class="footer-a" href="terms.html">Terms of Use</a></li>
                            <li><a class="footer-a" href="privacy-policy.html">Privacy and Policy</a></li>
                        </ul>
                    </div>
                    
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <p id="copyright">Copyright &copy; 2016. Groupeezz</p>
                    </div>
                </div>               
            </div>
        </div>
    </section>

Uniformly indented, it becomes obvious that the second .row is a child of the first .row. That’s not how bootstrap does things.

    <section id="footer" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <ul class="list-inline">
                        <li><a class="footer-a" href="terms.html">Terms of Use</a></li>
                        <li><a class="footer-a" href="privacy-policy.html">Privacy and Policy</a></li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <p id="copyright">Copyright &copy; 2016. Groupeezz</p>
                    </div>
                </div>               
            </div>
        </div>
    </section>

Why is this a big deal?

columns contain horizontal padding; eg:

col-sm-12 {
    min-height: 1px;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

a row contains negative horizontal margins; eg:

.row {
    margin-left: -15px;
    margin-right: -15px;
}

A row should be a child of a column. The negative margins in the .row pull the width of .row to the same with as the parent column. The available width of the child equals the overall width of the parent.
If one makes a row the child of another row, then the child becomes 30px wider than its grandparent column. In bootstrap, that unexpected width may trigger a horizontal scrollbar. (starting to sound familiar?)

On your page, you have used a bunch of .container classes. Those .container classes are the parents of .rows.
The problem with using the .container class instead of a col-umn class is that a .container is only assigned 12px of horizontal padding by bootstrap.

.container {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
}

and if one puts a .row inside that .container class element, the .row becomes 6px wider than the parent. That is where your horizontal scrollbar is coming from at narrow widths. That and the .row as a child of a .row in the #footer.

This new perpetual horizontal scrollbar is being triggered by the new .row and its child .row that have been added just inside <section id="home">

I don’t know where the .container class is supposed to be used in bootstrap.

As I said before, I do not recommend pursuing navbars or other content until the page is framed correctly… even if that means learning how to use bootstrap properly first.

If you believe your CSS has problems, the first tool to use is:
https://validator.w3.org/nu/#file

Go ahead, click this link. It’s not as scary as the one in the previous post:
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ff13-preview.awardspace.net%2Fgroupeezz.dx.am%2Fgroupeezz3%2Fcss%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

I believe someone will be along in about 6 hours who can evaluate my “findings” and provide definitive guidance about bootstrap for you.

(@PaulOB)

 
<aside>
previous post introducing this issue:
https://www.sitepoint.com/community/t/bootstrap-file-triggers-horizontal-scrollbar-below-780px/222578
</aside>

3 Likes

Containers can’t be nested inside other containers and should really be the container for the whole page. If you need full width background but a centred fixed width section then you can use a div around the container for the background image but each block should be separate and no containers should be nested inside other .containers.

Rows are used to hold the columns once inside the container.. To nest rows they would need to be inside a column so that the column padding accommodates the negative margin on the row.

The grid has to be adhered to strictly and is why I don’t think it is suitable for beginners to use until they understand the basics of css. I have worked with bootstrap on a few client sites but I tend to avoid using the grid for all but the simplest of layouts.

1 Like

Seems to me that the outer edge of .row will extend past the outer edge of .container and trigger a horizontal scrollbar. 12px -15px = overflow. How is that overhang avoided or delt with?

As much as I don’t want to, I’m going to have to study and play with bootstrap. There isn’t enough time in the day…

The container should have padding of 15px the same as the negative margin on the row in the standard setup. The columns also have 15px padding so rows can be nested in columns.

Here’s a default to play with :slight_smile:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding:10px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #dbdfe5;
    }
	/* for testing only */
	.box12{height:100px}
	.box11{height:110px}
	.box10{height:120px}
	.box9{height:130px}
	.box8{height:140px}
	.box7{height:150px}
	.box6{height:160px}
	.box5{height:170px}
	.box4{height:180px}
	.box3{height:190px}
	.box2{height:200px}
	.box1{height:210px}
	
	.container,.container-fluid{background:red}
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box1">Box 1</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box2">Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box3">Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box4">Box 4</p></div>
            <div class="clearfix visible-sm-block visible-lg-block"></div>

            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box5">Box 5</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box6">Box 6</p></div>
            <div class="clearfix visible-sm-block visible-md-block"></div>
           
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box7">Box 7</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box8">Box 8</p></div>
            <div class="clearfix visible-sm-block visible-lg-block"></div>
            
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box9">Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box10">Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box11">Box 11</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box12">Box 12</p></div>
        </div>
    </div>
    
     <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box1">Box 1</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box2">Box 2</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box3">Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box4">Box 4</p></div>
            <div class="clearfix visible-sm-block visible-lg-block"></div>

            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box5">Box 5</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box6">Box 6</p></div>
            <div class="clearfix visible-sm-block visible-md-block"></div>
           
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box7">Box 7</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box8">Box 8</p></div>
            <div class="clearfix visible-sm-block visible-lg-block"></div>
            
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box9">Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box10">Box 10</p></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box11">Box 11</p></div>
            <div class="col-md-4 col-lg-3 col-sm-6"><p class="box12">Box 12</p></div>
        </div>
    </div>
    
    
</body>
</html>  

Notice how complicated it is to clear uneven height columns effectively.

Ah, which the OP’s doesn’t.

My very first question to the OP was “did you make any changes to the bootstrap file?” There was no response. I thought about downloading a fresh copy of bootstrap and comparing the two versions, but didn’t follow through. (For that, I wear the dunce cap for the day.) That would have cleared up the 3px difference in the horizontal padding in the .container class div… the OP’s has 12px, the original bootstrap applies 15px. Would have also provided a clue into the OP’s skill level.

The problem with using a .row as a child of a .row was OP ignorance and should have been straightforward to address. Hopefully, the OP read your post.

Too bad the OP has been a non-participant in the attempted conversations.

Thank you very much for pitching in and for adding the working example. I’ll spend some time with it.

1 Like

Hi ronpat, sorry I haven’t responded to your post yet. Yes I’ve changed the padding on the bootstrap. The white right margin space is gone and so is the horizontal bar.

There’s one thing I do want to say though. Please do not call me ignorant. I am still learning just as everyone is in these forums. It may be straightforward to you or someone else, but not to me and millions of people out there. This is why we have teachers to teach us and students to learn things. I am not an expert nor am I an intermediate. I am learning these things as I go and this is my first time putting a website like this together. So yes, there will be simple stupid errors and obvious things that I may not see. But thank you for addressing the issues and helping me.

I’ve also like to use bootstrap because I like the grid system and my teacher has not told us much about adjusting changes to the default bootstrap.css. Now I know. I’m learning slowly all on my own and it takes time for me to process it.

I stated:

Oxford Dictionary defines “ignorance” as “Lack of knowledge or information.”
http://www.oxforddictionaries.com/definition/english/ignorance

I would think that you are taking a course to learn about bootstrap to help overcome your ignorance of it and learn how to use it productively.

“Ignorant”, the adjective (note the spelling), might be preceeded by “Your are” and could be assumed to rudely mis-characterize a person, but the word “ignorance” does not characterize a person, it describes a state of knowledge and I think it’s fair to say that you didn’t know better than to position a .row as the child of a .row in bootstrap. That was my assumption, anyway.

Ignorance of most anything that we’ve never seen or experienced before is a normal state. It can be overcome to some degree by most through education and experience. A few will exceed the level of man’s knowledge about a subject and thereafter our collective knowledge becomes greater. We generally call them geniuses, and we rarely know about any “non-genius” traits they may have.

I was ignorant of everything except light, noise and hunger when I was born. By the time I die, I hope to be less ignorant of a few things. So far, I’ve managed to learn a little about CSS, but the flood of new changes are already outpacing my ability to keep up. I don’t mind remaining ignorant of bootscrap. That’s not on my priority list of things to learn.

The first thing you should learn about using a framework is never change the master (default) files. Always make your changes in a custom stylesheet in such a way that they supplement or override the default styles… and to accomplish that, the custom stylesheet should always be the last CSS stylesheet in the cascade.

I am happy to provide whatever help I can offer with the understanding that I am not a bootstrap person. That means that my knowledege of bootstrap protocols is fledgling, but I will do the best that I can. Just don’t leave me or any of us hanging without a response. Without information, my “guesses” can be pretty haphazard. On the positive side… you might be the thorn in my derrier that spurs me to learn more about bootstrap.

I believe you were last working on a problem with the navbar(s). Have you found a proper solution for that issue or are you still working on it?

after sleeping on this…

I did not. Nevertheless, you make a good point.

Perhaps the next time I will choose a word such as “inexperience” rather than “ignorance”.

Your code was overall too good for me to think negatively of you. I believed that you were making common, new-bootstrap-user errors. I don’t feature myself as one who gives up on promising people which is why I tried to communicate with you (in spite of my “inexperience” with bootstrap). I apologize for my ignorant choice of words.

2 Likes

It’s ok. I appreciate you helping me though. I’m trying to clean up my code and organize it. It’s starting to looking better now. Hopefully I can finish this soon… =/

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.