user3424751 user3424751 - 4 months ago 17
HTML Question

Menu/Navigation Position

Good day folks. I am somewhat new to the coding world and am having a

problem with my navigation area of new site. I use Zoho Sites as my site builder and they have oodles of "built-in" CSS. What I am attempting to accomplish is to have my menu/navigation run the width of the "top area" of the page, below the logo. I want to increase the logo size as well, however, when I attempt to do that, the menu shrinks more and more. Currently the logo and menu are side by side. You can see where I am now here: http://realtimehockey2015.zohosites.com/ I guess the code that Zoho uses is what is really confusing to me. I'm sure for most of you this is an easy fix but, I just can't seem to figure it out. I've been toying with the code for a couple of days now and just can't figure it out. Because the entire CSS exceeds the 30,000 character limit here, I will just post the CSS dealing with the top area and navigation. Any and all help would be greatly appreciated.

CSS Code

.themeTopArea {
background - color: $NavigationBGColor[#ffffff];
padding: 5 px 0;
box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - webkit - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - moz - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06); - o - box - shadow: 0 1 px 1 px rgba(0, 0, 0, 0.06);
}

.themeBrandingContainer {
display: table;
border: 0 solid;
width: 100 % ;
}
.tableRow {
display: table - row;
}
.tableCell {
display: table - cell
}
.themeLogoOuterContainer {
width: 350 px;
height: 50 px;
vertical - align: middle;
}
.themeLogoArea {
padding - right: 5 px;
height: 50 px;
width: 350 px;

}
.themeSitenameCaptionOuterContainer {
vertical - align: middle;
height: 100 % ;
width: 45 % ;
}
.themeSitenameCaptionInnerContainer {
height: 100 % ;
vertical - align: middle;
}
.themeSitenameCaptionContainer {
vertical - align: middle;
height: 100 % ;
}
.themeSitename {
font - family: $SiteNameFontFamily['Lobster Two', Georgia, serif];
font - size: $SiteNameFontSize[48 px];
color: $SiteNameTextColor[#1b2929];
word-wrap: break-word;
line-height: 1;
}
.themeCaptionArea {
text-align: center;
padding: 25px 0;
}
.themeCaption {
font-family:$CaptionFontFamily['Overlock', Verdana, sans-serif];
font-size:$CaptionFontSize[18px];
color:$CaptionTextColor[# 393939];
letter - spacing: 3 px;
text - transform: uppercase;
}

.themeNavigationAreaContainer {
vertical - align: bottom;
height: 100 % ;
width: 100 % ;
}
.themeNavigationArea {
float: left;
}#
navigation ul {
list - style: none;
margin: 0;
padding: 0;
}#
navigation li {
display: block;
float: left;
padding: 0;
padding - left: 10 px;
margin: 0;
}#
navigation li a {
display: block;
padding - right: 20 px;
color: $NavigationAColor[#ff6600];
font - size: $NavigationFontSize[14 px];
font - family: paladins;
font - weight: 500;
float: left;
text - decoration: none;
cursor: pointer;
line - height: 2.6;
background - image: $NavigationBGImage[url(images / navigationSeprator.png)];
background - repeat: $NavigationBGRepeat[no - repeat];
background - position: $NavigationBGPosition[right center];
}#
navigation li: hover a, #navigation li.selected a, #navigation li.active a {
color: rgb(8, 8, 8, 0.8);
background - color: $NavigationBGSelectedColor[transparent];
background - image: $NavigationBGSelectedImage[url(images / navigationSeprator.png)];
background - repeat: $NavigationBGSelectedRepeat[no - repeat];
background - position: $NavigationBGSelectedPosition[right center];
}#
navigation li: last - child a {
background - image: $NavigationBGSelectedImage[none];
}#
navigation li a span {
float: left;
}#
navigation li.navArrow a em, #navigation li: hover.navArrow a em, #navigation li.selected.navArrow a em, #navigation li.selected.navArrow a em {
background: url(images / navArrow.png) no - repeat 0 0;
display: block;
float: left;
height: 8 px;
width: 10 px;
margin: 18 px 0 0 10 px;
}#
navigation li: hover.navArrow a em, #navigation li.selected.navArrow a em, #navigation li.active.navArrow a em {
background: url(images / navArrowHover.png) no - repeat 0 0;
}

HTML Code

<div class="themeSocialandSearchContainer">
<div class="themeWidth"> [search start]
<div class="themeSearchContainer"> [searchform start]
<div class="themeSearchBox"> ${searchinput} ${searchbutton}</div>
[searchform end] </div>
[search end] [socialicon start]
<div class="themeSocialIconContainer">
<div class="themeSocialiconArea">${socialicon}</div>
</div>
[socialicon end]
<div class="clearDiv"></div>
</div>
</div>
<div class="themeTopArea">
<div class="themeWidth">
<div class="themeBrandingArea">
<div class="themeBrandingContainer">
<div class="tableRow"> [logo start]
<div class="tableCell themeLogoOuterContainer">
<div class="themeLogoArea">${logo 500x61}</div>
</div>
[logo end]
<div class="tableCell themeSitenameCaptionOuterContainer">
<div class="themeBrandingContainer themeSitenameCaptionInnerContainer">
<div class="tableRow themeSitenameCaptionOuterContainer">
<div class="tableCell themeSitenameCaptionContainer"> [sitename start]
<div class="themeSitename" data-zs- container="sitename">${sitename}</div>
[sitename end] </div>

<div class="tableCell themeNavigationAreaContainer">[navigation start]
<div class="themeNavigationArea">
<div id="navigation">${navigation}</div>
</div>
[navigation end] </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="themeWidth">
<div class="themeCaptionArea">[caption start]
<div class="themeCaption" data-zs-container="caption">${caption}</div>
[caption end]</div>
[banner start]
<div class="themeBanner">${banner 1000x460}</div>
[banner end]
<div class="themeContentContainer">[content start]
<div class="themeContentArea floatLeft" data-zs-container="content">
[breadcrumb start]
<div class="themeBreadcrumb">${breadcrumb &ndash;}</div>
[breadcrumb end] ${content} </div>
[content end] [sidebar start]
<div class="themeSidebarArea floatLeft" data-zs-container="sidebar">
<div class="themeSidebarAreaInner">${sidebar equalHeight}</div>
</div>
[sidebar end]
<div class="clearDiv"></div>
</div>
</div>
[footer start]
<div class="themeFooterArea">
<div class="themeWidth">${footer}</div>
</div>
</div>
[footer end] [slideshow start]
<div class="zs-slideshow-right-arrow"></div>
<div class="zs-slideshow-left-arrow"></div>

Answer

As an extension to the answer given by @ksav, which puts the logo and the menu on their own rows by removing the tableCell class from both the themeLogoOuterContainer and themeSitenameCaptionOuterContainer, you can also evenly distribute the menu items across the width of the page body with this CSS:

.themeNavigationAreaContainer {
    width: 100%;
}

.themeNavigationArea {
    width: 100%;
}

#navigation {
    display: table;
    width: 100%;
}

#nav-top {
    display: table-row;
}

#nav-top > li {
    display: table-cell;
    width: calc(100% / 6 - 10px); /* 100% divided by 6 menu items, each with 10px padding-left */
}

Also, if you want your logo to be larger, you can give it this CSS:

#zpLogo {
    height: auto;
    width: 200%; /* however large you want */
}

but you may want to upload an image with better resolution.