Jump to content
Killersites Community
Andrea

Bootstrap Question

Recommended Posts

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?

Share this post


Link to post
Share on other sites

On the computer, the header looks like this:

moms1.png

On my cellphone, I get

moms.png

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!!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Kwisatsoundman
  • Upvote 1

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×