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

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

0 голосов
/ 28 апреля 2018

веб-сайт: https://wells -demo.squarespace.com / Нужен логотип в центре раздела страницы, исключая левую боковую панель (заголовок) в квадрате WELLS-шаблона на всех форматах: мобильный, рабочий стол и т. Д. Я пытаюсь выяснить, но безрезультатно. Мой код 

$(document).ready(function(){

 $('#headerWrapper #header ').after('<div id="logo1"  data-content-field="site-title"><h1 class="logo image" data-shrink-original-size="23" style="letter-spacing: 0.0869565em;"><a href="/"><img src="//static1.squarespace.com/static/5adfd10929711421a9b29d21/t/5adfdbac562fa79909bad158/1524908392416/?format=750w" alt="L ETO BRIDAL" width="130"  height=50"></a></h1></div>');
});
#logo{display:none;}
  #headerWrapper{top:4px!important}
  #logo1 h1  a img {
       height:70px!important;
    
      
  }
 #logo1 {
    left: 300%;
    position: absolute;
    text-align: center !important;
    top: 10px !important;
    transform: translateX(-50%);

enter image description here

Ответы [ 2 ]

0 голосов
/ 28 апреля 2018

Исходя из вашего текущего CSS, это должно сделать это: 

#logo {
  width: 100%;
  text-align: center;
}
@media (min-width: 801px) {
  #logo {
    position: fixed;
    width: calc(100% - 340px);
    top: 0;
    margin-left: 240px;
    box-sizing: border-box;
    background-color: #ffffff85;
    padding: .5rem 0;
    border-bottom: 1px solid #fff;
  }
}

Примечание: в текущей форме ваш вопрос не очень полезен для будущих посетителей.

0 голосов
/ 28 апреля 2018

Вы можете прочитать структуру, которую я сделал ниже, используя w3.css из w3schools. Я выделил цвет рамки для каждого элемента, чтобы вы могли видеть границы этого элемента, и вам будет легче учиться. 

.outer
{
border:1px solid red;
min-height:100px;
width:100%;
}

.inner-left
{
border:1px solid green;
}

.inner-right
{
border:1px solid blue;
}

.centetr
{
text-align:center;
}

.photo
{
width:95%;
margin:0px auto;
height:40px;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 

<div class="w3-container outer">

<!--left side-->
<div class="w3-quarter inner-left">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>

<div class="w3-rest inner-right">
<div class="w3-container w3-margin-bottom centetr">
NAME
</div>
<div class="w3-container">

<div class="w3-half">
<img src="" class="photo">
</div>

<div class="w3-half">
<img src="" class="photo">
</div>

<div class="w3-half">
<img src="" class="photo">
</div>

<div class="w3-half">
<img src="" class="photo">
</div>

</div>
</div>

</div>
...