Forums

Bootstrap navbar and edit menu problems

Permalink 1 user found helpful
Hi, I'm having trouble using a bootstrap example with C5. I've looked at a number of articles on the forums here but nothing quite matches what I'm after.

Attached is a screenshot of where I'm at now. This is the nav bar code:
<div class="nav-collapse collapse">
                            <div class="span3" id="navbar-logo">
                                <span class="pull-left">
                                    <img style="height:150px;" src="<?php print $this->getThemePath(); ?>/img/logo.png" \>
                                </span>
                            </div>
                            <span class="navbar-text pull-right">
                                <img class="pull-right" src="<?php print $this->getThemePath(); ?>/img/tab.gif" \>
                                <br />
                                <br />
                                <img class="pull-right" src="<?php print $this->getThemePath(); ?>/img/tagline.png" \>
                            </span>
                        </div>


I also have a span3 sidebar on the page, with the affix class to hold it in place.
<div class="span3">
                    <div class="well-blue sidebar-nav affix span3">
                        <ul class="nav nav-list">
                            <li class="nav-header">Sidebar</li>
                            <li class="active"><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="nav-header">Sidebar</li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
Viewing 15 lines of 22 lines. View entire code block.


the problem is that the "span3"s aren't the same size. And if I resize the window, they get worse. Why aren't they the same width?

Another problem I'm having, which I think is a conflict between C5's CSS and Bootstrap's, is that when I'm in edit mode on a page, I have to click the very left edge of the block in order to get the 'Add Block', 'Add Stack' menu. And once I select one of those, instead of a popup I'm thrown to a new page with no styling at all - it just looks like plain HTML. I've tried to create a "c5wrapper" class but it either breaks the page or nothing happens.

PLEASE HELP!!

Thanks :-)

1 Attachment

 
headland replied on at Permalink Best Answer Reply
headland
Hi scruft,
your first problem is easy to solve. The span-class has a margin-left (normally 20px). If you delete the second span3 (div.sidebar-nav) – this div should automatically has the width of his parent-div. (see html block elements)
If it is necessary to use spanX inside a spanX element, you should add a div class="row":

<div class="span3">
     <div class="row">
          <div class="span3">
               // some content
          </div>
     </div>
</div>


Your second problem for me sounds like an javascript problem. Please use the element inspector of your browser (chrome, safari, firefox firebug) and look at the console. If an error message appears, follow the white rabbit ...

hope that helps ... toni
scruft replied on at Permalink Reply
Hi Toni,

Thanks for that reminder about the extra "row" div! Totally forgot that one.

And the second problem was my bad too - calling jquery twice..

Thanks!