CSS-логотип Bigcartel и навигация в одной строке?

Я пытаюсь разместить свою навигацию в той же строке, что и мой логотип, чтобы она могла быть справа от логотипа, а не под ним. Вот мой большой веб-сайт картеля,

http://kicksfactory.bigcartel.com

Вот заголовок.

/*============= Begin Header Area========================*/

#header-area {
    border-bottom: 1px solid {{ Border_Color }};
    float: left;
    margin: 20px auto auto;
    padding: 0 0 15px;
    position: relative;
    width: 100%;
}

#top-header {
    float: left;
    margin-bottom: 15px;
    min-height: 58px;
    position: relative;
    width: 100%;
}

#header {
margin-bottom: 0px;
position: relative;
margin-top: 0px;
}

#header h1 a {
color:{{ Main_Text_Color }};
    float: left;
    font-size: 70px;
    font-weight: bold;
    line-height: 100%;
}

#header h1 {
    float: left;
    font-size: 70px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 100%;
    margin-bottom: 0 !important;
    margin-top: 0;
    max-width: 70%;
    text-align: left;
    text-transform: uppercase;
    width: auto;
}

#header h1 img {
    float: left;
    max-height: 400px;
    max-width: 500px !important;
    min-height: 52px;
}

#header h1 span {
    float: left;
    margin-top: -10px;
    padding: 0;
}

#header.image h1 span{display:none}

#right-header {
position: absolute;
right: 0;
top: 35px;
width: auto;
}

Вот навигация.

/* Header Navigation Styles-------------------------------------------------*/


#header-navigation {
    background: none repeat scroll 0 0 transparent;
    border-bottom: medium none;
    border-top: medium none;
    clear: both;
    display: table;
    margin-top: 0;
    position: relative;
    width: 100.35%;
    z-index: 99999;
    padding-left: 300px;
    text-align: right;
    float: right;
}

#header-navigation ul {
background-color: {{ Header_Color }};
height: auto;
list-style-type: none;
margin: auto;
display: table-row;
padding: 0;
width: 100%;
}

#header-navigation ul > li {
    border-right: 0 none;
    display: inline-block;
    margin: 0 !important;
    min-width: 0;
    padding: 0 40px 0 0 !important;
    position: relative;
    text-align: left;
}

#header-navigation ul li.break {
height: 1px;
padding: 0;
margin-left:100%;  /* use e.g. 1000px if your ul has no width */
}

#header-navigation li > a {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: {{ Header_Navigation_Link_Color }};
    display: inline-table;
    float: left;
    font-family: {{ Header_Navigation_Link_Font }};
    font-size: {{ Header_Navigation_Link_Size }}px;
    font-weight: 500;
    height: auto;
    min-width: 0;
    padding: 0;
    text-transform: uppercase;
    vertical-align: middle;
    width: 100%;
    word-spacing: 5px;
}

#header-navigation li:hover a {
    color: {{ Header_Navigation_Link_Hover_Color  }};
}

#sub-navigation {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: none repeat scroll 0 0 transparent;
    display: inline-block;
    line-height: 100%;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

#categories {
    display: block;
    float: left;
    line-height: 100%;
    margin-left: 0;
    position: relative;
}

.categories-list > li {
    color: {{ Header_Navigation_Link_Color }}; 
    display: inline;
    float: left;
    font-size: 11px;
    font-weight: bold;
    line-height: 100%;
    list-style: none outside none;
    margin-right: 30px;
    padding-left: 0;
    position: relative;
    text-transform: uppercase;
}

.categories-list a {
    color: {{ Header_Navigation_Link_Color }} !important;
    font-weight: normal;
    text-transform: uppercase;
}

.categories-list span {
    display: list-item;
    font-size: 11px;
    list-style: none outside none;
}

.categories-list span:hover {
    color: {{ Header_Navigation_Link_Hover_Color  }};
}

.categories-list .sub-categories span {
list-style:none;
}

.sub-categories {
left:-9999px;
position: absolute;
width: auto;
}

.categories-list li:hover ul.sub-categories {
left: 0;
}

#sub-categories {
z-index: 99999;
top:0%;
margin-top: 100%;
list-style: none;
position: absolute;
left: -9999px;
width: auto;
min-width: 100%;
}

#subcat-container {
    background: {{ Background_Color }};
    border: medium none;
    float: left;
    margin-left: -47%;
    margin-top: 0;
    min-width: 100%;
    padding: 10px;
    position: relative;
    top: 0;
    width: auto;
    z-index: 999999;
}

.sub-categories li {
float: none;
padding: 0px !important;
}


.sub-categories li a {
    color: {{ Header_Navigation_Link_Hover_Color  }};
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-size: 10px;
    font-weight: normal !important;
    list-style: none outside none;
    margin: 0 0 8px;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.sub-categories li span a:hover {
color: {{ Header_Navigation_Link_Hover_Color  }} !important;
}

.sub-categories li:last-child a {
margin:0px;
}


#header-navigation > ul li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}

#sub-categories {
left:-999999px !important;
}


/*============= End Navigation Styles========================*/

css bigcartel
person Cesar Peña    schedule 01.04.2015    source источник
comment
Добро пожаловать в StackOverflow. Вам нужно будет включить соответствующий HTML-код, чтобы сделать этот фрагмент кода полезным. Не забудьте сузить код до того, что необходимо для иллюстрации проблемы.   -  person Barbara Laird    schedule 02.04.2015
comment
Я новичок в этом, извините, но вы не можете получить html с моего сайта?   -  person Cesar Peña    schedule 02.04.2015
comment
Самое приятное в stackOverflow то, что ответ на ваш вопрос будет сохранен здесь, чтобы помочь другим людям с похожими проблемами. Наличие вашего кода на вашем веб-сайте (который изменится, когда у вас будет правильный ответ) бесполезна для будущих людей. Кроме того, вы хотите, чтобы людям было легко ответить на ваш вопрос. Они делают вам одолжение. Итак, дайте им данные, которые им нужны, чтобы помочь вам как можно удобнее для них.   -  person Barbara Laird    schedule 02.04.2015
comment
Я понимаю, что вы имеете в виду, хорошо, позвольте мне исправить это, я новичок на этом сайте: P   -  person Cesar Peña    schedule 02.04.2015

Ответы (2)


arrow_upward
0
arrow_downward

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

#header { 
  height: 146px;
}

#header-navigation { 
  position: absolute;
  bottom: 0;
  right: 0;
}
person Nick Endle    schedule 02.04.2015

arrow_upward
0
arrow_downward

Удалить свойство CSS

#header-navigation {clear: both;  padding-left: 300px;width: 100.35%;}
#top-header{width: 100%;float: left;}
person Lalji Tadhani    schedule 02.04.2015