Place the logo above the main menu

4 posts from 2 voices

• Started 5 months ago by StockholmJohanna
• Latest reply from Devin
• This topic is not resolved

Tags:

No tags yet.

1. 

   StockholmJohanna
   Member

   Hello I would like to place the logo above the main menu, see: http://www.tandis.mitos.se
   As you see the Logo is quite large.
   How do I do that?
   Thank you,
   Johanna

   Posted 5 months ago #
2. 

   Devin
   Moderator

   Hi Johanna,

   Unfortunately I don't see a way of doing that without significantly re-doing the way the whole header is structured. It isn't built in a way that easily allows for the logo to just be pushed up and navigation down without a lot of other adjustment.

   I'd recommend looking into a freelance developer if its necessity so that it can be properly coded and adjusted to fit the customization.

   Regards,

   Devin

   Posted 5 months ago #
3. 

   StockholmJohanna
   Member

   Is it possible to push down the menu in the CSS?

   /************************************************************************
   -) HEAD
   *************************************************************************/
   #wrapper_head{
   position: relative;
   z-index: 100;
   overflow: visible;
   }

   #top .logo, .logo a{
   display:block;
   height:85px;
   width:165px;
   position:relative;
   left:0px;
   top:0px;
   border: none;
   padding: 0;
   margin:0;
   }

   #top .logo a, #top .logo a:hover{
   top:0;
   left:0;
   text-indent:-9999px;
   outline:none;
   border: none;
   }

   #top #head .logoimg, #top #head .logoimg a, #top #head .logoimg a img{
   text-indent:0;
   background-image: none;
   border:none;
   margin:0 0 -20px 0;
   }

   /*navigation*/

   #top .nav{
   height:50px;
   line-height:30px;
   padding-left:13px;
   right:0px;
   position:absolute;
   z-index:100;
   top:29px;
   }

   .nav, .nav ul{
   margin:0;
   padding:0;
   list-style-type:none;
   list-style-position:outside;
   position:relative;
   line-height:50px;
   z-index:5;
   }

   #top .nav a{
   display:block;
   float:left;
   line-height:18px;
   outline:medium none;
   padding:2px 10px;
   text-decoration:none;
   width:95px;
   min-height: 35px;
   }

   .nav li a strong {
   display:block;
   font-size:14px;
   font-weight:normal;
   }

   .nav li a span {
   display:block;
   font-size:10px;
   line-height:14px;
   }

   #top .nav li{
   float:left;
   position:relative;
   z-index:20;
   }

   #top .nav li:first-child a{
   border:none;
   }

   #top .nav ul {
   display:none;
   left:0;
   position:absolute;
   top:20px;
   width:192px;
   padding-top:30px;

   }

   #top .nav li ul a{
   width:148px;
   height:auto;
   float:left;
   text-align:left;
   line-height:24px;
   padding:4px 21px;
   font-size: 12px;
   min-height: 24px;
   }

   #top .nav ul ul{
   top:auto;
   padding-top: 0px !important;
   }

   #top .nav li ul ul {
   left:191px;
   top:0px;
   }

   #top .nav li:hover ul ul, #top .nav li:hover ul ul ul,#top .nav li:hover ul ul ul ul{
   display:none;
   }
   #top .nav li:hover ul, #top .nav li li:hover ul, #top .nav li li li:hover ul, #top .nav li li li li:hover ul{
   display:block;
   }

   Posted 5 months ago #
4. 

   Devin
   Moderator

   Looking at the way you have it now seems to do the trick though its a bit heavy handed (re-using the same div id).

   Regards,

   Devin

   Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.