Навигационная панель с центрированным логотипом

Я просматривал похожие вопросы, но не нашел решений для того, что я ищу специально. Я пытаюсь получить свой навигационный бар вокруг моего централизованного логотипа с четным количеством ссылок по обеим сторонам логотипа. Однако, если окно меньше, ссылки должны появляться под логотипом. В основном я пытаюсь добиться эффекта этой страницы: http://www.colbowdesign.com/index.html Навигационная панель с центрированным логотипом

Вот мой код до сих пор:

HTML

<header> 
      <img src="assets/CK-Square.png" class="logo"> 
      <ul> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Social</a></li> 
      </ul> 
    </header>

CSS

.logo { 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
} 

header li{ 
     display: inline; 
} 

header { 
     width: 100% 
     height: auto; 
     border-style: solid; 
     margin: 0; 
     padding: 0; 
}

Я ценю любую обратную связь /Помогите!

источник

2013-05-19 Micah

Вы можете разместить свой код функционирующий где-нибудь? – kaidez

Этот сайт просто плавает влево два из них и справа два из них. Вы можете просто сделать то же самое и использовать медиа-запросы для изменения по своему усмотрению. – Steven

Решение основано на использовании медиа-запросов, чтобы изменить макет с малого экрана на рабочий стол.

<header> 
    <h2 id="logo">Logo</h2> 
    <ul class="nav"> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Social</a></li> 
    </ul> 
</header> 


header { 
    width: 90%; 
    margin: 0 auto; 
} 

#logo { 
    text-align: center; 
} 

.nav { 
    text-align: center; 
} 

.nav li { 
    display: inline; 
    margin-right: 1em; 
} 

/* use media query to change the layout */ 
@media (min-width: 768px) { 
    body { 
     background-color: #f2f2f2; 
    } 

    .nav { 
     margin-top: -42px; 
    } 

    .nav li:nth-child(1), .nav li:nth-child(2) { 
     float: left; 
    } 

    .nav li:nth-child(3), .nav li:nth-child(4) { 
     float: right; 
    } 
}

увидеть вживую http://jsbin.com/arexuq/2/

источник

2013-05-19 06:14:03

Большое спасибо за это объяснение и код. Я буду работать над этим, когда я вернусь и дам вам знать, смогу ли я сам работать! Еще раз спасибо! – Micah

Просто обновил мой код и заставил его работать! Еще раз спасибо за ваше время и помощь! – Micah

@ Мика. Отлично, Мика, держи его –

-2

Используйте стол ..

<table><tr> 
    <td><a href="#">Work</a></td> 
    <td><a href="#">About</a></td> 
    <td><img src="assets/CK-Square.png" class="logo"></td> 
    <td><a href="#">Contact</a></td> 
    <td><a href="#">Social</a></td> 
</tr></table>

источник

2013-05-19 03:54:39 matzone

Но когда ширина страницы уменьшена, она должна переместить логотип на верхнюю часть центра и сохранить ссылки ниже. – Micah

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

Добавить li:nth-child к вашему стилю

Если у вас есть четыре списка, вы можете добавить следующее:

header li:nth-child(1), header li:nth-child(2) { 
    float: left; 
} 
header li:nth-child(3), header li:nth-child(4) { 
    float: right; 
}

видеть на jsfiddle

You должен немного изменить его, чтобы создать привлекательный вид ance, here

источник

2013-05-19 04:34:45

Навигационная панель с центрированным логотипом

ответ

Смежные вопросы