Как разместить логотип в заголовке

Итак, я хочу разместить логотип рядом с моим меню с левой стороны. Проблема в том, что она не работает. Я все пробовал. Есть идеи?Как разместить логотип в заголовке

HTML:

<div id="flat-menu" class="color_1">

<ul> 
    <li><a href="/shop">Shop ⌄</a> 

     <ul class="dropdown-menu-full-width effect-1"> <!-- dropdown menu --> 
     <div class="column-1 alpha offset-by-three"> 
      <a href="#"><img src="/assets/img/cube.png" alt="img 1"> 
      <p><b><center>P93 Printer</p></b></center></a> 
     </div> 
     <div class="clearfix"></div> <!-- clearfix --> 

     </ul> 

    </li> 
    <li><a href="/materials">Materials</a></li> 
    <li><a href="/solutions">Solutions</a> 

     <!-- <ul class="dropdown-menu column-1 effect-2"> 

      <li><a href="/solutions/personal">Personal</a></li> 
      <li><a href="/solutions/commercial">Commercial</a></li> 
      <li><a href="/solutions/for-schools">For Schools</a></li> 
      <li><a href="/solutions/non-profits">For Non-Profits</a></li> 

     </ul> --> 
    </li> 
    <li><a href="/company">Company</a></li> 
    <li><a href="/help">Support</a></li> 


    </li></div> 

    </ul>

CSS:

#flat-menu.color_1 ul,#flat-menu.color_1 li,#flat-menu.color_1 a,#flat-menu.color_1 p { 
list-style:none; 
text-decoration:none; 
margin:0; 
padding:0; 
} 

#flat-menu.color_1 { 
background:#fff; 
min-width:20%; 
max-width:100%; 
min-height:40px; 
position:relative; 
z-index:999; 
width:100%; 
font-size:22px; 
font-family:arial; 

} 

#flat-menu.color_1>ul { 
min-height:40px; 
float:left; 
width:100%; 
background:#fff; 
border-bottom:2px solid #d7d7d7; 
} 

#flat-menu.color_1>ul>li { 
float:left; 
line-height:18px; 
border-top:2px solid rgba(0,0,0,0); 
cursor:pointer; 
margin-bottom:-2px; 
padding-top:10px; 
padding-bottom:10px; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
border-bottom:2px solid rgba(0,0,0,0); 
} 

#flat-menu.color_1>ul>li:before { 
content:""; 
display:block; 
height:20px; 
width:1px; 
background:rgba(0,0,0,.22); 
position:relative; 
float:right; 
right:0; 
z-index:1; 
} 

#flat-menu.color_1>ul>.active { 
background:#19b7ff; 
border-bottom:2px solid #0086c3; 
margin-left:-1px; 
} 

#flat-menu.color_1>ul>.active:before { 
width:0; 
} 

#flat-menu.color_1>ul>.active>a { 
color:#fff; 
position:relative; 
z-index:10; 
background:#19b7ff; 
} 

#flat-menu.color_1>ul>.active:hover,#flat-menu.color_1>ul>.active:hover>a { 
background:#19b7ff; 
} 

#flat-menu.color_1>ul>li>a { 
padding:11px 15px; 
} 

#flat-menu.color_1 ul li a { 
color:#525252; 
font-weight:700; 
text-transform:capitalize; 
} 

#flat-menu.color_1>ul>li:hover { 
background:rgba(17,36,59,.05); 
border-top:2px solid #19b7ff; 
transition:all .3s linear 0; 
-ms-transition:all .3s linear 0; 
-webkit-transition:all .3s linear 0; 
-moz-transition:all .3s linear 0; 
-o-transition:all .3s linear 0; 
} 

#flat-menu.color_1 .column-1 { 
width:16.333333333333%; 
float:left; 
margin:0 1% 10px; 
} 

#flat-menu.color_1 .column-2 { 
width:32.666666666667%; 
float:left; 
margin:0 1% 10px; 
} 

#flat-menu.color_1 .column-3 { 
width:48%; 
float:left; 
margin:0 1% 10px; 
} 

#flat-menu.color_1 .column-4 { 
width:63.333333333333%; 
float:left; 
margin:0 1% 10px; 
} 

#flat-menu.color_1 .column-5 { 
width:79.666666666667%; 
float:left; 
margin:0 1% 10px; 
} 

#flat-menu.color_1 .column-6 { 
width:98%; 
float:left; 
margin:0 1% 10px; 
} 

#flat-menu.color_1 .clearfix { 
clear:both; 
display:table; 
margin:0; 
padding:0; 
} 

#flat-menu.color_1>ul>li>.dropdown-menu { 
max-width:50%; 
} 

#flat-menu.color_1 ul li .dropdown-menu { 
position:absolute; 
background:#fff; 
top:40px; 
margin-left:0; 
margin-top:2px; 
cursor:default; 
border:1px solid rgba(0,0,0,.13); 
padding:13px 20px; 
} 

#flat-menu.color_1 ul li .dropdown-menu-full-width { 
position:absolute; 
left:0; 
background:#fff; 
top:40px; 
margin-top:2px; 
margin-left:-1px; 
width:100%; 
cursor:default; 
border:1px solid rgba(0,0,0,.13); 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
padding:13px 20px; 
} 

#flat-menu.color_1 ul li:hover>.effect-1,#flat-menu.color_1 ul li:hover>.effect-2 { 
transition:all .2s ease-in 0; 
-ms-transition:all .2s ease-in 0; 
-webkit-transition:all .2s ease-in 0; 
-moz-transition:all .2s ease-in 0; 
-o-transition:all .2s ease-in 0; 
visibility:visible; 
opacity:1; 
height:auto; 
overflow:visible; 
} 

#flat-menu.color_1 ul li .effect-1,#flat-menu.color_1 ul li .effect-2 { 
visibility:hidden; 
opacity:0; 
height:0; 
overflow:hidden; 
} 

#flat-menu.color_1 ul li .dropdown-menu:before,#flat-menu.color_1 ul li .dropdown-menu-full-width:before { 
content:""; 
display:block; 
height:5px; 
width:100%; 
background:rgba(255,0,0,0); 
position:absolute; 
left:0; 
top:-5px; 
} 

#flat-menu.color_1 ul li .dropdown-menu li,#flat-menu.color_1 ul li .dropdown-menu-full-width li { 
position:relative; 
padding-top:8px; 
padding-bottom:8px; 
margin-bottom:1px; 
font-size:small; 
border-bottom:1px solid rgba(0,0,0,.05); 
} 

#flat-menu.color_1 ul li .dropdown-menu li a { 
color:rgba(0,0,0,.5); 
} 

#flat-menu.color_1 ul li .dropdown-menu li:hover>a,#flat-menu.color_1 ul li .dropdown-menu-full-width li:hover>a { 
color:#19b7ff; 
transition:all .3s linear 0; 
-ms-transition:all .3s linear 0; 
-webkit-transition:all .3s linear 0; 
-moz-transition:all .3s linear 0; 
-o-transition:all .3s linear 0; 
} 

#flat-menu.color_1 .grid div { 
background:rgba(0,0,0,.1); 
text-align:center; 
font-size:small; 
padding:5px 0; 
} 

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu { 
position:absolute; 
left:100%; 
top:-19px; 
margin-left:35px; 
} 

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu:before { 
content:""; 
display:block; 
height:100%; 
width:60px; 
background:rgba(255,0,0,0); 
position:absolute; 
left:-50px; 
top:0; 
} 

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu:after { 
content:""; 
display:block; 
height:0; 
width:0; 
border-right:10px solid rgba(255,255,255,1); 
border-top:10px solid rgba(0,0,0,0); 
border-bottom:10px solid rgba(0,0,0,0); 
position:absolute; 
top:18px; 
left:-10px; 
} 

#flat-menu.color_1 img { 
width:92%; 
float:left; 
display:block; 
margin:4%; 
    opacity: 0.8; 
    -webkit-transition: all 0.5s ease; /*Transition*/ 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 
#flat-menu.color_1 img:hover { 
    opacity: 1; 
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); /*Glow*/ 
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
    box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
} 

#flat-menu.color_1 h1 { 
font-size:medium; 
color:rgba(0,0,0,.7); 
margin:0; 
padding:5px 0; 
} 

#flat-menu.color_1 hr { 
border:1px solid rgba(0,0,0,.05); 
} 

#flat-menu.color_1 p { 
color:rgba(0,0,0,.77); 
font-size:14px; 
line-height:18px; 
} 

#flat-menu.color_1 ul li .dropdown-menu li .fa.fa-chevron-right { 
position:absolute; 
right:0; 
color:rgba(0,0,0,.24); 
font-size:xx-small; 
line-height:14px; 
} 

#flat-menu.color_1>ul>.social-bar { 
float:right; 
height:40px; 
line-height:0; 
width:5%; 
text-align:center; 
margin:0 1px; 
} 

#flat-menu.color_1>ul>.social-bar>a { 
width:100%; 
height:100%; 
display:block; 
color:#fff; 
} 

#flat-menu.color_1>ul>.social-bar:hover i { 
transform:scale(1.1,1.1); 
-webkit-transform:scale(1.1,1.1); 
-ms-transform:scale(1.1,1.1); 
-moz-transform:scale(1.1,1.1); 
-o-transform:scale(1.1,1.1); 
} 

#flat-menu.color_1>ul>.social-bar .fa.fa-google-plus { 
background:#ee4d4e; 
width:100%; 
height:100%; 
color:#fff; 
line-height:38px; 
border-bottom:2px solid #e01516; 
} 

#flat-menu.color_1>ul>.social-bar .fa.fa-twitter { 
background:#19b8ff; 
width:100%; 
line-height:39px; 
height:100%; 
color:#fff; 
border-bottom:2px solid #09d; 
} 

#flat-menu.color_1>ul>.social-bar .fa.fa-facebook { 
background:#4e6bab; 
width:100%; 
line-height:40px; 
height:100%; 
color:#fff; 
border-bottom:2px solid #394f7f; 
} 

#flat-menu.color_1 .button-1,#flat-menu.color_1 .button-2,#flat-menu.color_1 .button-3,#flat-menu.color_1 .button-4,#flat-menu.color_1 .button-5 { 
min-width:100px; 
height:40px; 
font-size:16px; 
font-weight:700; 
text-transform:capitalize; 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
border-radius:4px; 
-moz-background-clip:padding; 
-webkit-background-clip:padding-box; 
background-clip:padding-box; 
border-top:none; 
border-left:none; 
border-right:none; 
color:#fff; 
cursor:pointer; 
text-align:center; 
} 

#flat-menu.color_1 .button-1 { 
background-color:#57bf77; 
border-bottom:2px solid #2d914d; 
} 

#flat-menu.color_1 .button-2 { 
background-color:#19b7ff; 
border-bottom:2px solid #1399d6; 
} 

#flat-menu.color_1 .button-3 { 
background-color:#896dcf; 
border-bottom:2px solid #613dba; 
} 

#flat-menu.color_1 .button-4 { 
background-color:#fb6f51; 
border-bottom:2px solid #e52d06; 
} 

#flat-menu.color_1 .button-5 { 
background-color:#00c9cf; 
border-bottom:2px solid #35b1b5; 
} 

#flat-menu.color_1 input { 
-moz-border-radius:4px; 
-webkit-border-radius:4px; 
border-radius:4px; 
-moz-background-clip:padding; 
-webkit-background-clip:padding-box; 
background-clip:padding-box; 
background-color:#f1f3f5; 
border:1px solid #dbe0e5; 
padding:5px; 
} 

#flat-menu.color_1 input:focus { 
background-color:rgba(17,35,59,.1); 
} 

#flat-menu.color_1 .alpha { 
margin-left:0!important; 
} 

#flat-menu.color_1 .omega { 
margin-right:0!important; 
} 

#flat-menu.color_1 .offset-by-one { 
padding-left:1%; 
} 

#flat-menu.color_1 .offset-by-two { 
padding-left:2%; 
} 

#flat-menu.color_1 .offset-by-three { 
padding-left:3%; 
} 

#flat-menu.color_1 .offset-by-four { 
padding-left:4%; 
} 

#flat-menu.color_1 .offset-by-five { 
padding-left:5%; 
} 

#flat-menu.color_1 .mobile-button { 
display:none; 
} 

#flat-menu.color_1 ul li .dropdown-menu li:last-child,#flat-menu.color_1 .button-1:active,#flat-menu.color_1 .button-2:active,#flat-menu.color_1 .button-3:active,#flat-menu.color_1 .button-4:active,#flat-menu.color_1 .button-5:active { 
border-bottom:none; 
} 

@media screen and min-width768px{ 
#flat-menu.color_1 ul li .effect-2 { 
margin-top:40px; 
} 

#flat-menu.color_1 ul li:hover>.effect-2 { 
margin-top:2px; 
} 
} 

@media screen and max-width768px{ 
#flat-menu.color_1 .column-1,#flat-menu.color_1 .column-2,#flat-menu.color_1 .column-3,#flat-menu.color_1 .column-4,#flat-menu.color_1 .column-5,#flat-menu.color_1 .column-6 { 
width:100%; 
margin:0 0 10px; 
} 

#flat-menu.color_1>ul>li { 
float:none; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
position:relative; 
border-bottom:1px solid rgba(0,0,0,.05); 
} 

#flat-menu.color_1>ul>li:first-child { 
background:#19b7ff; 
position:relative; 
left:1px; 
} 

#flat-menu.color_1>ul>li:first-child>a,#flat-menu.color_1>ul>.active>a { 
color:#fff; 
padding-bottom:9px; 
} 

#flat-menu.color_1>ul>li:before { 
display:none; 
} 

#flat-menu.color_1>ul>li>.dropdown-menu { 
max-width:100%; 
} 

#flat-menu.color_1 ul li .dropdown-menu { 
z-index:999; 
margin-top:-2px; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
padding:13px 20px; 
} 

#flat-menu.color_1 ul li .dropdown-menu li .dropdown-menu { 
position:relative; 
left:0; 
width:100%; 
top:0; 
visibility:visible!important; 
opacity:1!important; 
border:none; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
margin:9px 0; 
padding:0; 
} 

#flat-menu.color_1 .dropdown-menu .dropdown-menu a { 
padding-left:10px; 
} 

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu a { 
padding-left:20px; 
} 

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a { 
padding-left:30px; 
} 

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a { 
padding-left:40px; 
} 

#flat-menu.color_1 .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu .dropdown-menu a { 
padding-left:50px; 
} 

#flat-menu.color_1 ul li .dropdown-menu li:last-child { 
border-bottom:1px solid rgba(0,0,0,.05); 
} 

#flat-menu.color_1 ul li .dropdown-menu li .fa.fa-chevron-right { 
transform:rotate(90deg); 
-moz-transform:rotate(90deg); 
-ms-transform:rotate(90deg); 
-webkit-transform:rotate(90deg); 
-o-transform:rotate(90deg); 
} 

#flat-menu.color_1 ul li .effect-1 { 
visibility:hidden; 
opacity:0; 
height:0; 
overflow:hidden; 
} 

#flat-menu.color_1 ul li:hover>.effect-1 { 
visibility:visible; 
opacity:1; 
height:auto; 
overflow:visible; 
transition:all .2s ease-in .2s; 
-ms-transition:all .2s ease-in .2s; 
-webkit-transition:all .2s ease-in .2s; 
-moz-transition:all .2s ease-in .2s; 
-o-transition:all .2s ease-in .2s; 
} 

#flat-menu.color_1 .offset-by-one,#flat-menu.color_1 .offset-by-two,#flat-menu.color_1 .offset-by-three,#flat-menu.color_1 .offset-by-four,#flat-menu.color_1 .offset-by-five { 
padding-left:0; 
} 

#flat-menu.color_1 ul li .dropdown-menu-full-width { 
margin-top:-2px; 
margin-left:0; 
} 

#flat-menu.color_1>ul>.social-bar { 
float:left; 
width:45px; 
} 

#flat-menu.color_1>ul>.social-bar i { 
height:95%!important; 
margin-top:2px; 
} 

#flat-menu.color_1 .mobile-button { 
width:50%; 
position:absolute; 
height:40px; 
z-index:999; 
top:-2px; 
right:0; 
cursor:pointer; 
display:block; 
opacity:0; 
} 

#flat-menu.color_1 ul { 
height:42px; 
overflow:hidden; 
} 

#flat-menu.color_1 .mobile-button:checked+ul { 
height:auto; 
overflow:visible; 
} 

#flat-menu.color_1>ul>li:first-child:after { 
content:"|||||"; 
display:block; 
height:39px; 
width:60px; 
position:absolute; 
font:bold 25px/32px arial; 
top:0; 
right:0; 
color:#fff; 
text-align:center; 
letter-spacing:-2px; 
text-indent:16px; 
padding:0; 
}

Я так застрял. Опять же, я пытаюсь получить логотип в левой части меню. Подобно Stratasys.com. БЛАГОДАРЯ!

источник

2015-02-03 Owen

любой jsfiddle. ? –

@HituBansal У меня есть мой сайт: http://www.dextron3d.com – Owen

ли вы имеете в виду, как это:

<div id="flat-menu" class="color_1"> 

<ul> 
    <li><a href="#"><img src="/assets/img/cube.png" alt="img 1" /></a></li> 
    <li><a href="/shop">Shop ⌄</a>  
     <ul class="dropdown-menu-full-width effect-1"> <!-- dropdown menu --> 
     <div class="column-1 alpha offset-by-three"> 
      <p><b><center>P93 Printer</center></b></p> 
     </div> 
     <div class="clearfix"></div> <!-- clearfix -->  
     </ul>  
    </li> 
    <li><a href="/materials">Materials</a></li> 
    <li><a href="/solutions">Solutions</a></li> 
    <li><a href="/company">Company</a></li> 
    <li><a href="/help">Support</a></li> 
    </ul> 

</div>

Для края, найти это в вашем CSS:

#flat-menu.color_1 img { 
width:92%; 
float:left; 
display:block; 
}

источник

2015-02-03 04:45:49

Да, но вы не можете редактировать высоту. Кроме того, есть огромный запас на дне и в верхней части .... это проблема, которую я продолжаю получать :( – Owen

Опять же, есть огромный запас вверху: http://dextron3d.com @ColourDalnet – Owen

Нет * огромного margin * от вашего кода, проверьте это http://jsfiddle.net/n86291f9/ ... Пожалуйста, проверьте свой полный код ... –

Хотите ли вы этого? Логотип слева от ул

.html

<div class="nav"> 
    <a href="#"><img src="https://g.twimg.com/Twitter_logo_blue.png" /></a> 
    <ul> 
     <li><a href="http://www.google.com" >Google</a></li> 
     <li><a href="http://www.bing.com" >Bing</a></li> 
     <li><a href="http://www.yahoo.com" >Yahoo</a></li> 
    </ul> 
</div>

.css

.nav { 
    width: 100%; 
    height: 40px; 
    border: lightgrey 1px solid; 
} 

img { 
    width: 40px; 
    height: 40px; 
} 

ul { 
    margin-right: 50%; 
    list-style-type: none; 
    float: right; 
} 

li { 
    float: left; 
    margin: 4px 8px; 
}

Проверить этот эффект.

http://jsfiddle.net/ronansmith/56fu6m44/

источник

2015-02-03 07:18:24 ronan

Как разместить логотип в заголовке

ответ

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