0

Необходимо сделать навигационное меню как на картинке. Строго в центре экрана первый список меню, справа - другой. При сворачивании навигации в гамбургер правое меню должно центрироваться.

Реализовать я это смог прикрепив ко второму navbar класс position-absolute и стиль right: 0, думаю, что это костыль, а в верстке я не силен. Но при раскрытии гамбургера на маленьких экранах правый список не центрируется, что логично. Помогите реализовать такую навигацию, уже сил нет. В гугле почему-то именно такого варианта расположения меню не нашел.

введите сюда описание изображения

Код навигации:

<nav class="navbar navbar-expand-md navbar-light">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbar-main">

    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                <a class="nav-link" href="http://nazchurch/home">ГЛАВНАЯ</a>
            </li>
                        <li class="nav-item">
                <a class="nav-link" href="/about">О НАС</a>
            </li>
                        <li class="nav-item">
                <a class="nav-link" href="http://nazchurch/news">НОВОСТИ</a>
            </li>
                        <li class="nav-item">
                <a class="nav-link" href="/preview">АНОНСЫ</a>
            </li>
                        <li class="nav-item">
                <a class="nav-link" href="/media">МЕДИА</a>
            </li>
                </ul>

    <ul class="navbar-nav position-absolute" style="right: 0">
        <li class="nav-item dropdown">
            <a class="nav-link" href="#" id="login-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Войти
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="login-dropdown">
                <a class="dropdown-item" href="http://nazchurch/login">Один</a>
                <a class="dropdown-item" href="http://nazchurch/register">Два</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Регистрация</a>
        </li>
    </ul>

</div>

</nav>

Полный код:

https://jsfiddle.net/766vzm6q/2/

2 ответа 2

0

Так как накартинке или нет? https://jsfiddle.net/766vzm6q/4/

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>News</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Arsenal|Cormorant|Cormorant+Infant:300,400,500|Forum|Marck+Script" rel="stylesheet">

<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/E31689DC-CDF7-9C4F-B0B5-DD43AB09E8E2/main.js" charset="UTF-8"></script></head>
<body>

    <div id="app" class="container">

        <div class="row mt-3">
            <div class="col text-center">
                <p style="font-family: 'Cormorant Infant', serif; margin-bottom: 4px">Превью</p>
                <h1 style="font-family: 'Marck Script', cursive; font-size: 60px; margin: 0 auto">Большой заголовок</h1>
                <nav class="navbar navbar-expand-md navbar-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbar-main">

        <ul class="navbar-nav mx-auto">
                            <li class="nav-item">
                    <a class="nav-link" href="http://nazchurch/home">ГЛАВНАЯ</a>
                </li>
                            <li class="nav-item">
                    <a class="nav-link" href="/about">О НАС</a>
                </li>
                            <li class="nav-item">
                    <a class="nav-link" href="http://nazchurch/news">НОВОСТИ</a>
                </li>
                            <li class="nav-item">
                    <a class="nav-link" href="/preview">АНОНСЫ</a>
                </li>
                            <li class="nav-item">
                    <a class="nav-link" href="/media">МЕДИА</a>
                </li>
                    </ul>

        <ul class="navbar-nav" style="">
            <li class="nav-item dropdown">
                <a class="nav-link" href="#" id="login-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Войти
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="login-dropdown">
                    <a class="dropdown-item" href="http://nazchurch/login">Один</a>
                    <a class="dropdown-item" href="http://nazchurch/register">Два</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Регистрация</a>
            </li>
        </ul>

    </div>

</nav>
            </div>
        </div>

        <div class="row justify-content-end">
            <div class="col-12">
                            </div>
        </div>

        <div class="row">
                    </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
</body>
</html>
3
  • нет, первое меню должно быть строго по центру экрана
    – rugleb
    13 апр 2018 в 14:39
  • @rugleb так, а где оно находиться, если не по средине? 16 апр 2018 в 6:36
  • Так я и говорю по центру экрана (середине если хотите), но в вашем примере это не так. Я полную картинку приложил того как должно быть
    – rugleb
    16 апр 2018 в 7:13
0

для мобильной версии удали position absolute у класса .position-absolute можете переоределить css

@media screen and (max-width: 764px){
    .position-absolute{
    position:relative;
    }
    }

или на js просто удалить класс, как вам удобнее. я бы переопределил css..

5
  • Это выход, но больше похоже на костыль. А есть еще какие-нибудь варианты?
    – rugleb
    13 апр 2018 в 14:42
  • Я вам открою тайну, css состоит из костылей) а вообще я только что попробовал просто не добавлять класс position-absolute и либоя пьян либо это сработало jsfiddle.net/766vzm6q/6 13 апр 2018 в 14:50
  • скорее первое) Первый список теперь не в центре экрана
    – rugleb
    13 апр 2018 в 14:52
  • тогда прошу прощения я реально накатил) 13 апр 2018 в 14:58
  • @rugleb Да, это абсолютно нормально - переопределить класс. В мобильной верстке без костылей не обойтись :)
    – phen0menon
    13 апр 2018 в 16:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.