Jump to content

Bootstrap Question


Andrea

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?

Link to comment
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!!

Link to comment
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?

Link to comment
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.

Link to comment
Share on other sites

  • 1 year later...

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
Link to comment
Share on other sites

  • 1 year later...

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 by LSW
We allow links for more active users.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...