1. дома
  2. Вопрос и ответ
  3. Как выровнять значок меню и текст заголовка

Как выровнять значок меню и текст заголовка

2017-02-07 2 views
0

На моем сайте есть значок гамбургера меню и заголовок. Я пытался выровнять их так, чтобы они были в одной строке, но я не могу понять, как это сделать. Я пробовал обертывание внутри div, и я также попробовал display:inline-block. Кто-нибудь знает, как выровнять текст и значок гамбургера.Как выровнять значок меню и текст заголовка

@import url(http://fonts.googleapis.com/css?family=Raleway:500); 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.menu-wrapper { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-top: 60px; 
 
    margin-left: 30px; 
 
} 
 
.menu { 
 
    position: relative; 
 
    width: 36px; 
 
    height: 6px; 
 
    background-color: #707070; 
 
    user-select: none; 
 
    transition: all 0.25s ease-in-out; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    color: #707070; 
 
    -webkit-perspective: 1000; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 
.menu label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 40px; 
 
    line-height: 30px; 
 
    top: -12px; 
 
    left: 48px; 
 
} 
 
.menu:hover > ul.nav-links, 
 
.menu.open > ul.nav-links { 
 
    transition: all 0.25s ease-in-out; 
 
    opacity: 1; 
 
    width: 180px; 
 
    transform: translateX(15px); 
 
    pointer-events: auto; 
 
} 
 
.menu:after, 
 
.menu:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 36px; 
 
    height: 6px; 
 
    background-color: #707070; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
.menu:after { 
 
    top: 12px; 
 
} 
 
.menu:before { 
 
    top: -12px; 
 
} 
 
.menu:hover, 
 
.menu.open { 
 
    background-color: transparent; 
 
} 
 
.menu:hover::after, 
 
.menu:hover::before, 
 
.menu.open::after, 
 
.menu.open::before { 
 
    transition: all 0.3s ease-in-out; 
 
    width: 18px; 
 
} 
 
.menu:hover::after, 
 
.menu.open::after { 
 
    transform: translate(3px, -7px) rotate(405deg); 
 
} 
 
.menu:hover::before, 
 
.menu.open::before { 
 
    transform: translate(12px, 17px) rotate(-405deg); 
 
} 
 
.menu ul.nav-links { 
 
    margin: 0; 
 
    padding: 36px 0 0 0; 
 
    opacity: 0; 
 
    transform: translateX(-15px); 
 
    transition: all 0.25s ease-in-out; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    pointer-events: none; 
 
} 
 
.menu ul.nav-links li { 
 
    width: 100%; 
 
    padding: 4px 8px; 
 
    list-style-type: none; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
    transition: all 0.25s ease-in-out; 
 
    border-left: 2px solid #707070; 
 
} 
 
.menu ul.nav-links li:hover, 
 
.menu ul.nav-links li.active { 
 
    color: #707070; 
 
    border-left: 2px solid #707070; 
 
} 
 
@import url('https://fonts.googleapis.com/css?family=Fjalla+One'); 
 
@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
@import url('https://fonts.googleapis.com/css?family=Oswald'); 
 
@import url('https://fonts.googleapis.com/css?family=Quicksand'); 
 
header { 
 
    background: #fff; 
 
    height: 145px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
    border-bottom: 5px solid; 
 
    border-bottom-color: #bcbcbc; 
 
} 
 
.nav-up { 
 
    top: -145px; 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
video.home { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    z-index: -100; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
div.vid { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    z-index: -100; 
 
} 
 
footer { 
 
    background: #222020; 
 
    height: 50px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    margin-bottom: 0.5em; 
 
    margin-bottom: 0.5em; 
 
    margin-left: 0.5em; 
 
    margin-right: 0.5em; 
 
    width: 99%; 
 
} 
 
p.copyright { 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 15px; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 
div.footer { 
 
    float: left; 
 
    margin-left: 2em; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    color: #666; 
 
} 
 
p { 
 
    color: black; 
 
    font-family: 'Oswald', sans-serif; 
 
} 
 
a.contact { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #36a2dc; 
 
    padding: 20px; 
 
    padding-left: 10px; 
 
    border-radius: 5%; 
 
    cursor: pointer; 
 
    outline: none; 
 
    height: 100px; 
 
    width: 200px; 
 
    font-family: 'Quicksand', sans-serif; 
 
} 
 
i.icon { 
 
    padding: 8px; 
 
} 
 
div.contact { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
ul.social { 
 
    display: block; 
 
    margin: 5% 0; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin-top: 0px; 
 
} 
 
ul.social li { 
 
    font-size: 1em; 
 
    display: inline; 
 
    padding: 0 2%; 
 
} 
 
ul.social li a { 
 
    color: #707070; 
 
} 
 
ul.social li.dribble a:hover { 
 
    color: #e040a9; 
 
} 
 
ul.social li.twitter a:hover { 
 
    color: #258fc9; 
 
} 
 
ul.social li.behance a:hover { 
 
    color: #212121; 
 
} 
 
ul.social li.googleplus a:hover { 
 
    color: #e73710; 
 
} 
 
ul.social li.github a:hover { 
 
    color: #171515; 
 
} 
 
/*=================HEADER=====================================*/ 
 

 
a { 
 
    text-decoration: none; 
 
    color: #707070; 
 
} 
 
a:hover { 
 
    color: #898e8e; 
 
} 
 
a:active { 
 
    color: white; 
 
} 
 
div.head { 
 
    margin-top: 10px; 
 
} 
 
/*=========================================================== */ 
 

 
.container { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
/* ============================================================ 
 
    SECTIONS 
 
============================================================ */ 
 

 
section.module:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module h2 { 
 
    margin-bottom: 40px; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    font-size: 30px; 
 
    color: #515151; 
 
    text-align: center; 
 
} 
 
section.module p { 
 
    margin-bottom: 40px; 
 
    font-size: 16px; 
 
    font-weight: 300; 
 
    color: #515151; 
 
    text-align: center; 
 
} 
 
section.module p:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module.content { 
 
    padding: 40px 0; 
 
} 
 
section.module.parallax { 
 
    height: 600px; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 
section.module.parallax h1 { 
 
    color: rgba(255, 255, 255, 0.8); 
 
    font-size: 48px; 
 
    line-height: 600px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
 
} 
 
section.module.parallax-1 { 
 
    background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg"); 
 
} 
 
section.module.parallax-2 { 
 
    background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg"); 
 
} 
 
section.module.parallax-3 { 
 
    background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg"); 
 
} 
 
@media all and (min-width: 600px) { 
 
    section.module h2 { 
 
    font-size: 42px; 
 
    } 
 
    section.module p { 
 
    font-size: 20px; 
 
    } 
 
    section.module.parallax h1 { 
 
    font-size: 96px; 
 
    } 
 
} 
 
@media all and (min-width: 960px) { 
 
    section.module.parallax h1 { 
 
    font-size: 160px; 
 
    } 
 
}
<header class="nav-down"> 
 

 
    <!-- Open on hover menú --> 
 
    <div class="menu-wrapper"> 
 
    <div class="menu"> 
 

 
     <ul class="nav-links"> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="about.html">About</a> 
 
     </li> 
 
     <li><a href="#">Portfolio</a> 
 
     </li> 
 
     <li class="active"><a href="#">Projects</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class=""> 
 
    <h1>William Chen</h1> 
 
    <ul class="social"> 
 
     <li class="dribble"><a href="https://dribbble.com/WilliamC" target="_blank"><i class="fa fa-dribbble fa-3x"></i></a> 
 
     </li> 
 
     <li class="twitter"><a href="https://twitter.com/CookieWilliamC" target="_blank"><i class="fa fa-twitter fa-3x"></i></a> 
 
     </li> 
 
     <li class="behance"><a href="https://www.behance.net/WilliamC" target="_blank"><i class="fa fa-behance fa-3x"></i></a> 
 
     </li> 
 
     <li class="googleplus"><a href="https://plus.google.com/102927761095010198782" target="_blank"><i class="fa fa-google-plus fa-3x"></i></a> 
 
     </li> 
 
     <li class="github"><a href="https://github.com/monsterwill" target="_blank"><i class="fa fa-github fa-3x"></i></a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>

источник

2017-02-07 COOKIE

+0

Прошу прощения за это. –

+0

Быстрое, но не очень хорошее решение - изменить заголовок на это: '

William Chen

' – Thanasis

+0

https://jsfiddle.net/MONSTER_COOKIE/wvyxe5rp / – COOKIE

ответ

1

Вот в JsFiddle с некоторыми изменениями: https://jsfiddle.net/m5b2f0gc/1/

Одна вещь, которую я сделал это изменило запас .menu, а затем я создал новый идентификатор, называемый «уилльям», чтобы помочь переместите маржу слева.

.menu { 
    position: relative; 
    width: 36px; 
    height: 6px; 
    background-color: #707070; 
    user-select: none; 
    transition: all 0.25s ease-in-out; 
    cursor: pointer; 
    margin: 20px; 
    color: #707070; 
    -webkit-perspective: 1000; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-tap-highlight-color: transparent;

}

#william { 
margin-left: 150px; 
}

источник

2017-02-07 19:07:51 Staveven

0

Много комментарии здесь ... но ни один из них не предполагает, казалось бы, самый простой вариант.

Оберните оба эти элемента в div (или нет, он работает без родительского div, если ваши ширины как для обертки меню, так и для головы - < = 100% в сочетании).

Добавьте следующий как .menu-обертку и .Head класс:

.menu-wrapper, .head { 
    float:left; 
}

Это будет получить их в той же строке. Затем вы можете использовать заливку/высоту линии, чтобы выровнять их более красиво.

источник

2017-02-07 19:13:05 rob

0

Я думаю, что этот код делает то, что вы хотите:

@import url(http://fonts.googleapis.com/css?family=Raleway:500); 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.menu-wrapper { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-top: 60px; 
 
    margin-left: 30px; 
 
    text-align: justify; 
 
} 
 
.menu { 
 
    position: relative; 
 
    width: 36px; 
 
    height: 6px; 
 
    background-color: #707070; 
 
    user-select: none; 
 
    transition: all 0.25s ease-in-out; 
 
    cursor: pointer; 
 
    margin: 5px; 
 
    color: #707070; 
 
    -webkit-perspective: 1000; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 
.menu label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 40px; 
 
    line-height: 30px; 
 
    top: -12px; 
 
    left: 48px; 
 
} 
 
.menu:hover > ul.nav-links, 
 
.menu.open > ul.nav-links { 
 
    transition: all 0.25s ease-in-out; 
 
    opacity: 1; 
 
    width: 180px; 
 
    transform: translateX(15px); 
 
    pointer-events: auto; 
 
} 
 
.menu:after, 
 
.menu:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 36px; 
 
    height: 6px; 
 
    background-color: #707070; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
.menu:after { 
 
    top: 12px; 
 
} 
 
.menu:before { 
 
    top: -12px; 
 
} 
 
.menu:hover, 
 
.menu.open { 
 
    background-color: transparent; 
 
} 
 
.menu:hover::after, 
 
.menu:hover::before, 
 
.menu.open::after, 
 
.menu.open::before { 
 
    transition: all 0.3s ease-in-out; 
 
    width: 18px; 
 
} 
 
.menu:hover::after, 
 
.menu.open::after { 
 
    transform: translate(3px, -7px) rotate(405deg); 
 
} 
 
.menu:hover::before, 
 
.menu.open::before { 
 
    transform: translate(12px, 17px) rotate(-405deg); 
 
} 
 
.menu ul.nav-links { 
 
    margin: 0; 
 
    padding: 36px 0 0 0; 
 
    opacity: 0; 
 
    transform: translateX(-15px); 
 
    transition: all 0.25s ease-in-out; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    pointer-events: none; 
 
} 
 
.menu ul.nav-links li { 
 
    width: 100%; 
 
    padding: 4px 8px; 
 
    list-style-type: none; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
    transition: all 0.25s ease-in-out; 
 
    border-left: 2px solid #707070; 
 
} 
 
.menu ul.nav-links li:hover, 
 
.menu ul.nav-links li.active { 
 
    color: #707070; 
 
    border-left: 2px solid #707070; 
 
} 
 
@import url('https://fonts.googleapis.com/css?family=Fjalla+One'); 
 
@import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
@import url('https://fonts.googleapis.com/css?family=Oswald'); 
 
@import url('https://fonts.googleapis.com/css?family=Quicksand'); 
 
header { 
 
    background: #fff; 
 
    height: 145px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
    border-bottom: 5px solid; 
 
    border-bottom-color: #bcbcbc; 
 
} 
 
.nav-up { 
 
    top: -145px; 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
video.home { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    z-index: -100; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
div.vid { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    z-index: -100; 
 
} 
 
footer { 
 
    background: #222020; 
 
    height: 50px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    margin-bottom: 0.5em; 
 
    margin-bottom: 0.5em; 
 
    margin-left: 0.5em; 
 
    margin-right: 0.5em; 
 
    width: 99%; 
 
} 
 
p.copyright { 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 15px; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 
div.footer { 
 
    float: left; 
 
    margin-left: 2em; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    color: #666; 
 
    margin-bottom: -80px; 
 
} 
 
p { 
 
    color: black; 
 
    font-family: 'Oswald', sans-serif; 
 
} 
 
a.contact { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #36a2dc; 
 
    padding: 20px; 
 
    padding-left: 10px; 
 
    border-radius: 5%; 
 
    cursor: pointer; 
 
    outline: none; 
 
    height: 100px; 
 
    width: 200px; 
 
    font-family: 'Quicksand', sans-serif; 
 
} 
 
i.icon { 
 
    padding: 8px; 
 
} 
 
div.contact { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
ul.social { 
 
    display: block; 
 
    margin: 5% 0; 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin-top: 0px; 
 
} 
 
ul.social li { 
 
    font-size: 1em; 
 
    display: inline; 
 
    padding: 0 2%; 
 
} 
 
ul.social li a { 
 
    color: #707070; 
 
} 
 
ul.social li.dribble a:hover { 
 
    color: #e040a9; 
 
} 
 
ul.social li.twitter a:hover { 
 
    color: #258fc9; 
 
} 
 
ul.social li.behance a:hover { 
 
    color: #212121; 
 
} 
 
ul.social li.googleplus a:hover { 
 
    color: #e73710; 
 
} 
 
ul.social li.github a:hover { 
 
    color: #171515; 
 
} 
 
/*=================HEADER=====================================*/ 
 

 
a { 
 
    text-decoration: none; 
 
    color: #707070; 
 
} 
 
a:hover { 
 
    color: #898e8e; 
 
} 
 
a:active { 
 
    color: white; 
 
} 
 
div.head { 
 
    margin-top: 10px; 
 
} 
 
/*=========================================================== */ 
 

 
.container { 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
/* ============================================================ 
 
     SECTIONS 
 
    ============================================================ */ 
 

 
section.module:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module h2 { 
 
    margin-bottom: 40px; 
 
    font-family: 'Fjalla One', sans-serif; 
 
    font-size: 30px; 
 
    color: #515151; 
 
    text-align: center; 
 
} 
 
section.module p { 
 
    margin-bottom: 40px; 
 
    font-size: 16px; 
 
    font-weight: 300; 
 
    color: #515151; 
 
    text-align: center; 
 
} 
 
section.module p:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module.content { 
 
    padding: 40px 0; 
 
} 
 
section.module.parallax { 
 
    height: 600px; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 
section.module.parallax h1 { 
 
    color: rgba(255, 255, 255, 0.8); 
 
    font-size: 48px; 
 
    line-height: 600px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
 
} 
 
section.module.parallax-1 { 
 
    background-image: url("https://static.pexels.com/photos/34578/pexels-photo.jpg"); 
 
} 
 
section.module.parallax-2 { 
 
    background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UQ9AB8NRV9.jpg"); 
 
} 
 
section.module.parallax-3 { 
 
    background-image: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2UXCQG5Q7W.jpg"); 
 
} 
 
@media all and (min-width: 600px) { 
 
    section.module h2 { 
 
    font-size: 42px; 
 
    } 
 
    section.module p { 
 
    font-size: 20px; 
 
    } 
 
    section.module.parallax h1 { 
 
    font-size: 96px; 
 
    } 
 
} 
 
@media all and (min-width: 960px) { 
 
    section.module.parallax h1 { 
 
    font-size: 160px; 
 
    } 
 
}
<h1>William Chen</h1> 
 
<div class="menu-wrapper"> 
 
    <div class="menu"> 
 

 
    <ul class="nav-links"> 
 
     <li><a href="index.html">Home</a> 
 
     </li> 
 
     <li><a href="about.html">About</a> 
 
     </li> 
 
     <li><a href="#">Portfolio</a> 
 
     </li> 
 
     <li class="active"><a href="#">Projects</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="head"> 
 

 
    <ul class="social"> 
 
    <li class="dribble"><a href="https://dribbble.com/WilliamC" target="_blank"><i class="fa fa-dribbble fa-3x"></i></a> 
 
    </li> 
 
    <li class="twitter"><a href="https://twitter.com/CookieWilliamC" target="_blank"><i class="fa fa-twitter fa-3x"></i></a> 
 
    </li> 
 
    <li class="behance"><a href="https://www.behance.net/WilliamC" target="_blank"><i class="fa fa-behance fa-3x"></i></a> 
 
    </li> 
 
    <li class="googleplus"><a href="https://plus.google.com/102927761095010198782" target="_blank"><i class="fa fa-google-plus fa-3x"></i></a> 
 
    </li> 
 
    <li class="github"><a href="https://github.com/monsterwill" target="_blank"><i class="fa fa-github fa-3x"></i></a> 
 
    </li> 
 
    </ul> 
 
</div>

JSFiddle: https://jsfiddle.net/wvyxe5rp/2/

То, что я сделал, это переместить элемент h1 сверху, а затем добавьте следующую строку:

margin-bottom: -80px;

внутри css h1.

источник

2017-02-07 19:22:28 Thanasis

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

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