A
A
Andrey Raboy2015-11-29 17:51:50
css
Andrey Raboy, 2015-11-29 17:51:50

How to make such a menu in Bootstrap?

Here is an example:
ac16a9808d174da3bafb94a2cfae45ca.JPG
the problem is that the picture stretches the row where the menu items are located:
c50ed410a9a44efb87bef01c098c2f02.JPG
I don’t want to make crutches, I need it on the mob. On devices, the logo was then hidden, but I'll try it myself ...
css bootstrap did not edit much. If you need any more info, I'll provide it.

<div class="container">
    <div class="row">
        <div class="col-lg-2">
            <img src="img/logo.png">
        </div>
        <div class="col-lg-10  higer">
                <div class="navbar-header">
                    <!-- Кнопка для меню при масштабировании -->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsiv-menu"> 
                        <span class="sr-only">Открыть навигацию</span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="responsiv-menu">
                    <ul class="nav navbar-nav">
                        <li><a class="" href="#">Пункт меню 1</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Пункт меню 2<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a class="" href="#">первый </a></li>
                                <li><a class="" href="#">Второй</a></li>
                                <li><a class="" href="#">Третий</a></li>
                                <li class="divider"></li>
                                <li><a class="" href="#">первый </a></li>
                                <li><a class="" href="#">Второй</a></li>
                                <li><a class="" href="#">Третий</a></li>
                            </ul>
                        </li>
                        <li><a class="" href="#">Пункт меню 3</a></li>
                    </ul>
                </div>
        </div>
    </div>                
</div>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
display: block, 2015-11-29
@raba

Would absolute positioning of the logo help?
codepen.io/anon/pen/wKVoGE

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question