Bootstrap Question

[Andrea]

I just applied Bootstrap to an existing Wordpress website, and mostly, it went well (as it appears to me). However, the header is giving me problems, and I don't know how correct the problem.

www.momshousecleaning.com

What am I not considering?

[falkencreative]

What is currently happening, and what do you want to happen?

[Andrea]

On the computer, the header looks like this:

On my cellphone, I get

I don't really have any certain expectation other than that the header text should stay inside the header and not run all over the place.

 

Thanks Ben!!

[Andrea]

The image is a background image inserted via CSS - I do wonder if that is part of the problem? should I create one row with 2 columns, one for text, one for the picture, and insert the picture via HTML instead?

[falkencreative]

Looks like the issue is primarily due to the fixed height on .header. The set height doesn't allow that section to re-flow into multiple lines. Removing the fixed height would be the first step to fixing it, though you'll need to do some styling adjustments on the header as well, such as removing the left margin on the .header h2.

 

Personally, I'd consider restyling the .header section completely, removing the background image, removing the fixed header height, and making it a normal <img> element with floated text. The background image and the left margin on the header text is the primary issue that is preventing proper mobile display.

[Andrea]

That's what I figured (but didn't want to be true). Makes sense. Thanks, Ben.

[Kwisatsoundman]

Hello Andrea,

We are two years later, but since your website is still active, the following might be useful to you: 

1) You already solved partly your problem regarding your header (from the "width" point of view, but not entirely from the "height" one). 

For you header div, you could use "background-size: cover;" instead of "background-size: 100%", because at the mobile width, your #dbe3f0 substitute background color for this div starts to appear as a grey horizontal strip below your background-image, which is not very beautiful. 

2) Also, still at the mobile resolution, you should initally hide your navigation menu until a button is clicked, and not reveal it right away. As you still use Bootstrap in its version 3.3, this framework provides a quick and easy fix to this problem. Check out this page :
http://getbootstrap.com/docs/3.3/javascript/#collapse

But for this to work, you first need to include in your Wordpress theme both the jQuery library (which you already do) and the Bootstrap JAVASCRIPT library too, just below it, in the head section of your HTML code. Because currently, you only use the Bootstrap CSS responsive grid, but not its JavaScript capabilities. Don't worry if you didn't learn JavaScript, you wouldn't have to write a single line of JavaScript to take advantage of this feature.

Then, basically, you add the following button with the following attributes: 

<button type="button" class="navbar-toogle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

And you add a "navbar-collapse" class to you nav div (this name must match the name of the data-target attribute of the previously inserted button):

<nav class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>Our services</li>
        <li>About us</li>
        <li>Photos</li>
        <li>Testimonials</li>
        <li>Contact Us</li>
    </ul>
</nav>

 

Edited October 31, 2017 by Kwisatsoundman

[Andrea]

Thank you so much for this very detailed response. It'll take me a bit to figure out what I did 2 years ago, but I'll work through it and apply your suggestions.

[Kwisatsoundman]

You're welcome. Let me know if you are stuck at some point. Good luck!

[SunnyChawla]

Explain what is Bootstrap collapsing elements?

Ans: Bootstrap crumbling components empowers you to fall a specific component without composing any JavaScript code or the accordion markup. In Bootstrap to apply crumbling components, you need to include information toggle= "breakdown" to the controller component alongside an information target or href to consequently dole out control of a collapsible component. In like manner, you can utilize .breakdown (alternatives), .breakdown ('show') or .breakdown ('cover-up'). site

If you want to know more about Bootstrap you can visit my site: [Deleted]

Edited April 2, 2019 by LSW
We allow links for more active users.