Мне нужна помощь, чтобы заказать и разместить некоторые элементы для логотипа и навигации - PullRequest
Новая
       13

Мне нужна помощь, чтобы заказать и разместить некоторые элементы для логотипа и навигации

0 голосов
/ 06 июля 2019

Я работаю на небольшой веб-странице с WordPress и начальной темой начальной загрузки.В настоящее время я пытаюсь создать блок логотипа слева с заголовком main и sub и некоторыми svg для лучшего вида, а справа - панель навигации.В основном похоже на эту тему здесь: Макет Bootstrap вне контейнера , но с разницей я использую в проекте Bootstrap 4 (на основе обновления WP).Поэтому некоторые классы, описанные в другой теме, больше не работают, и новая замена (например, float вместо pull) не работает должным образом в моем случае.Также окно навигации в настоящее время находится под логотипом, но должно быть в той же строке, но меньше (всего 30-40 пикселей в высоту).

Сначала я попробовал данное решение для начальной загрузки 3, а затем решил проблемы сзагрузчик 4, но без какого-либо реального успеха.

Здесь у вас есть источник заголовка. 

<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="d-flex flex-column w-100">
    <div class="d-md-flex d-block flex-nowrap">
      <div class="collapse navbar-collapse">
        <ul id="navbar-section-list" class="navbar-nav mr-auto w-100">
          <div id="logo" class="float-left col col-5">
            <div class="row">
              <div class="pl-font maintitle row">
                <div class="maintitle-box p-logo">
                  Plackermann<br>&amp; Söhne
                </div>
                <svg class="svg-logo bg-white" height="70" width="35"><polygon points="35,0 35,70 0,70" style=""></polygon></svg>
                <svg class="svg-logo" height="70" width="35"><polygon points="0,0 35,0 0,70" style=""></polygon></svg>
              </div>
            </div>
            <div class="row">
              <div class="pl-font subtitle row">
                <div class="subtitle-box p-logo">
                  Ihr Partner für Innen &amp; Außen
                </div>
                <svg class="svg-logo" height="20" width="10"><polygon points="0,0 10,0 0,20" style=""></polygon></svg>
              </div>
            </div>
          </div>
        </ul>
        <ul class="navbar-nav ">

          <div id="main-nav" class="collapse navbar-collapse justify-content-end pl-font">
            <ul id="menu-main" class="navbar-nav">
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-21 nav-item"><a title="Start" href="http://plackermann.de" class="nav-link">Start</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87 nav-item"><a title="Leistungen" href="http://plackermann.de/leistungen/" class="nav-link">Leistungen</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90 nav-item"><a title="Referenzen" href="http://plackermann.de/referenzen/" class="nav-link">Referenzen</a></li>
              <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86 nav-item"><a title="Kontakt" href="http://plackermann.de/kontakt/" class="nav-link">Kontakt</a></li>
            </ul>
          </div>
        </ul>
      </div>
    </div>
    <small id="navbar-node-info"></small>
  </div>
</nav>
        <div id="content" class="site-content">
        <div class="container">
            <div class="row">

    <section id="primary" class="content-area col-sm-12 col-lg-8">
        <main id="main" class="site-main" role="main">


<article id="post-26" class="post-26 page type-page status-publish hentry">
        <header class="entry-header">
        <h1 class="entry-title">Start</h1>  </header><!-- .entry-header -->

    <div class="entry-content">
                <div data-elementor-type="post" data-elementor-id="26" class="elementor elementor-26" data-elementor-settings="[]">
            <div class="elementor-inner">
                <div class="elementor-section-wrap">
                            <section class="elementor-element elementor-element-43e1c32 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="43e1c32" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div class="elementor-element elementor-element-16e79d7 elementor-column elementor-col-100 elementor-top-column" data-id="16e79d7" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div class="elementor-element elementor-element-87ddffa elementor-widget elementor-widget-image-carousel" data-id="87ddffa" data-element_type="widget" data-settings="{&quot;navigation&quot;:&quot;both&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;direction&quot;:&quot;ltr&quot;}" data-widget_type="image-carousel.default">
                <div class="elementor-widget-container">
                    <div class="elementor-image-carousel-wrapper elementor-slick-slider" dir="ltr">
            <div class="elementor-image-carousel slick-arrows-inside slick-dots-outside slick-initialized slick-slider slick-dotted"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button>
                <div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 3081px; transform: translate3d(-1185px, 0px, 0px);"><div class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide4-150x150.jpg" alt="Slide4"></figure></div><div class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide3-150x150.png" alt="Slide3"></figure></div><div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide5-150x150.png" alt="Slide5"></figure></div><div class="slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide1-150x150.png" alt="Slide1"></figure></div><div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide01" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide2-150x150.png" alt="Slide2"></figure></div><div class="slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control01" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide4-150x150.jpg" alt="Slide4"></figure></div><div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide03" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide3-150x150.png" alt="Slide3"></figure></div><div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control02" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide5-150x150.png" alt="Slide5"></figure></div><div class="slick-slide slick-cloned" data-slick-index="5" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide1-150x150.png" alt="Slide1"></figure></div><div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide2-150x150.png" alt="Slide2"></figure></div><div class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide4-150x150.jpg" alt="Slide4"></figure></div><div class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide3-150x150.png" alt="Slide3"></figure></div><div class="slick-slide slick-cloned" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide5-150x150.png" alt="Slide5"></figure></div></div></div>         <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button><ul class="slick-dots" style="display: block;" role="tablist"><li class="" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="-1">1</button></li><li role="presentation" class="slick-active"><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide02" aria-label="2 of 2" tabindex="-1">2</button></li><li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide04" aria-label="3 of 2" tabindex="0" aria-selected="true">3</button></li></ul></div>
        </div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>
                <section class="elementor-element elementor-element-443b894 elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="443b894" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div class="elementor-element elementor-element-b2d7feb elementor-column elementor-col-66 elementor-top-column" data-id="b2d7feb" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div class="elementor-element elementor-element-dc0a86e elementor-widget elementor-widget-text-editor" data-id="dc0a86e" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><!-- wp:paragraph -->
<p><strong>Willkommen beim Familienbetrieb Plackermann &amp; Söhne in Wenden!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Sie planen eine Neugestaltung Ihres Gartens oder eine Renovierung im
Haus?</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Wir sorgen dafür das es gut wird, denn wir sind</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Ihr Partner für Innen &amp; Außen</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Ihr „Plackermann“ Sven Kasinowski (Inhaber)</strong></p>
<!-- /wp:paragraph --></div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                <div class="elementor-element elementor-element-37be6ea elementor-column elementor-col-33 elementor-top-column" data-id="37be6ea" data-element_type="column">
            <div class="elementor-column-wrap">
                    <div class="elementor-widget-wrap">
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>
                        </div>
            </div>
        </div>
            </div><!-- .entry-content -->

            <footer class="entry-footer">
            <span class="edit-link"><a class="post-edit-link" href="http://plackermann.de/wp-admin/post.php?post=26&amp;action=edit">Edit <span class="screen-reader-text">"Start"</span></a></span>        </footer><!-- .entry-footer -->
    </article><!-- #post-## -->

        </main><!-- #main -->
    </section><!-- #primary -->

            </div><!-- .row -->
        </div><!-- .container -->
    </div><!-- #content -->
        <footer id="colophon" class="site-footer navbar-light" role="contentinfo">
        <div class="container pt-3 pb-3">
            <div class="site-info">
                © 2019 <a href="http://plackermann.de">Plackermann &amp; Söhne</a>                <span class="sep"> | </span>
                <a class="credits" href="https://afterimagedesigns.com/wp-bootstrap-starter/" target="_blank" title="WordPress Technical Support" alt="Bootstrap WordPress Theme">Bootstrap WordPress Theme</a>

            </div><!-- close .site-info -->
        </div>
    </footer><!-- #colophon -->
</div>

А здесь ссылка на сохраненную версию, где вы можете посмотреть на CSS.http://kflt.de/tmp/plackermann/plackermann.html

То, чего я хочу достичь, это именно то, что показано в примере.Div логотипа начинается с краев экрана, текст логотипа начинается с начальной точки контейнера, а навигация по правой стороне в сером поле на конце контейнера.

Я надеюсь, что кто-нибудь может мне помочь или датьмне некоторые подсказки.

Спасибо.

ОБНОВЛЕНИЕ: Теперь Ирин исправляет некоторые детали, спасибо за это.У меня есть две проблемы: текст логотипа должен начинаться с начальной точки Content-Conatiner (извините, я пропустил эту информацию до того, как код обновился).Итак, вопрос в том, можно ли разместить навигацию в меньшем контейнере, чтобы он выглядел так? Текущий вид с реализованным улучшением

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...