Move Responsive Menu/Nav without expanding the logo image

Author

Message

Nick

Posted: 6/22/2013

I have found the part of the responsive css that controls the menu/nav to move up and down. When I set margin-top: 200px;, it moves the menu bar closer to where I want it, but the logo image is expanding in size. Is there a way to stop the size of the logo image from expanding?


.responsive nav.oye-nav

{

   min-width: 1%;

   margin-top: 0px;

   

   

}


.responsive body

{

   min-width: 240px;

}

  

.responsive .oye-content-layout img,

.responsive .oye-content-layout video

{

   max-width: 100%;

   height: auto !important;

}



.responsive.responsive-phone .oye-content-layout img 

{

   float: none !important;

}

    

.responsive .oye-content-layout .oye-sidebar0, 

.responsive .oye-content-layout .oye-sidebar1, 

.responsive .oye-content-layout .oye-sidebar2 

{

   width: auto !important;

}

    

.responsive .oye-content-layout, 

.responsive .oye-content-layout-row, 

.responsive .oye-layout-cell 

{

   display: block;

}

    

.responsive .image-caption-wrapper 

{

   width: auto;

}



.responsive.responsive-tablet .oye-vmenublock,

.responsive.responsive-tablet .oye-block

{

   margin-left: 1%;

   margin-right: 1%;

   width: 48%;

   float: left;

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

}



.responsive .oye-responsive-embed 

{

   position: relative;

   padding-bottom: 56.25%;

   /* 16:9 */

	height: 0;

}



.responsive .oye-responsive-embed iframe,

.responsive .oye-responsive-embed object,

.responsive .oye-responsive-embed embed

{

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

}



.responsive .oye-header 

{

   width: auto;

   height: auto;

   min-height: 210px;

   min-width: 1%;

   margin-right: 1% !important;

   margin-left: 1% !important;

   background-position: center center !important;

   background-image: url(http://www.ouryouthexpo.com/wp-content/uploads/2013/06/oyelogo3.jpg);

   background-size: cover !important;

   background-repeat: repeat !important;

   top: 0px;

}



.responsive .oye-header .oye-headline, 

.responsive .oye-header .oye-slogan 

{

   display: block !important;

   top: 0 !important;

   left: 0 !important;

   margin: 2% !important;

}

    

.responsive .oye-header .oye-headline a, 

.responsive .oye-header .oye-slogan 

{

   white-space: normal !important;

}

  

.responsive .oye-header *

{

   position: relative;

   text-align: center;

   -webkit-transform: none !important;

   -moz-transform: none !important;

   -o-transform: none !important;

   -ms-transform: none !important;

   transform: none !important;

}



.responsive .oye-header #oye-flash-area,

.responsive .oye-header .oye-shapes>*

{

   display: none;

}



.responsive #oye-header-bg 

{

   background-position: center center !important;

   background-size: cover !important;

   background-repeat: repeat !important;

}



/* Search and other elements in header element directly */

.responsive .oye-header>.oye-textblock

{

   position: relative !important;

   display: block !important;

   margin: 1% auto !important;

   width: 75% !important;

   top: auto !important;

   right: auto !important;

   bottom: auto !important;

   left: auto !important;

}



/* For icons like facebook, rss, etc. */

.responsive .oye-header>.oye-textblock>div 

{

   width: 100%;

}

/* dynamic width nav */

.oye-nav .oye-menu-btn 

{

   border: 1px solid #404040;

   border-radius: 3px;

   box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);

   display: none;

   background: -ms-linear-gradient(top, #707070 0, #000 100%);

   background: -moz-linear-gradient(top, #707070 0, #000 100%);

   background: -o-linear-gradient(top, #707070 0, #000 100%);

   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(1, #000));

   background: -webkit-linear-gradient(top, #707070 0, #000 100%);

   background: linear-gradient(to bottom, #707070 0, #000 100%);

   margin: 3px;

   padding: 5px;

   position: relative;

   width: 20px;

   

}



.oye-nav .oye-menu-btn span 

{

   background: #E0E0E0;

   border-radius: 2px;

   display: block;

   height: 3px;

   margin: 3px 1px;

   position: relative;

   -moz-transition: background .2s;

   -o-transition: background .2s;

   -webkit-transition: background .2s;

   transition: background .2s;

   

}



.oye-nav .oye-menu-btn:hover span

{

   background: #f3f3f3;

}



.responsive .oye-nav .oye-menu-btn 

{

   display: inline-block;

}



.responsive nav.oye-nav,

.responsive .oye-nav-inner

{

   width: auto !important;

   position: relative !important;

   top: auto !important;

   left: auto !important;

   right: auto !important;

   bottom: auto !important;

   margin-top: 0;

   margin-bottom: 0;

   min-width: 0;

   text-align: right !important;

   

}



.responsive nav.oye-nav

{

   min-width: 1%;

   margin-top: 200px;

   

   

}



.responsive .oye-nav 

{

   padding-left: 0;

   padding-right: 0;

   margin-bottom: 20px;

   

}



/* full width hmenu, instead of inline-block */

.responsive .oye-nav ul.oye-hmenu 

{

   display: none;

   float: none;

   text-align: center;

}



.responsive .oye-nav .oye-hmenu.visible 

{

   display: block;

}



/* elements on different lines */

.responsive .oye-nav ul.oye-hmenu li,

.oye-hmenu-extra1,

.oye-hmenu-extra2

{

   float: none;

}

  

/* horizontal margins */

.responsive .oye-nav ul.oye-hmenu>li:first-child, 

.responsive .oye-nav ul.oye-hmenu>li:last-child, 

.responsive .oye-nav ul.oye-hmenu>li

{

   margin-left: 0;

   margin-right: 0;

}

 

/* separator */ 

.responsive .oye-nav ul.oye-hmenu>li:before

{

   display: none;

}



/* vertical distance between items */

.responsive .oye-nav ul.oye-hmenu a

{

   margin-top: 1px !important;

   margin-bottom: 1px !important;

   text-align: center !important;

   height: auto;

   white-space: normal;

}



.responsive .oye-nav ul.oye-hmenu>li:first-child>a

{

   margin-top: 0 !important;

}



.responsive .oye-nav ul.oye-hmenu>li:last-child>a

{

   margin-bottom: 0 !important;

}



/* fixes for extended menu */

.responsive .oye-nav .ext, 

.responsive .oye-nav ul.oye-hmenu>li>ul, 

.responsive .oye-nav ul.oye-hmenu>li>ul>li,

.responsive .oye-nav ul.oye-hmenu>li>ul>li a

{

   width: auto !important;

}



/* submenu position on hover */

.responsive .oye-nav ul.oye-hmenu ul

{

   left: auto !important;

   right: auto !important;

   top: auto !important;

   bottom: auto !important;

   display: none !important;

   position: relative !important;

   visibility: visible !important;

}



.responsive .oye-nav ul.oye-hmenu>li>ul>li:first-child:after 

{

   display: none;

}

.responsive .oye-nav ul.oye-hmenu ul a

{

   padding-left: 4% !important;

}

.responsive .oye-nav ul.oye-hmenu ul ul a

{

   padding-left: 6% !important;

}

.responsive .oye-nav ul.oye-hmenu ul ul ul a

{

   padding-left: 8% !important;

}

.responsive .oye-nav ul.oye-hmenu ul ul ul ul a

{

   padding-left: 10% !important;

}

.responsive .oye-nav ul.oye-hmenu ul ul ul ul ul a

{

   padding-left: 12% !important;

}

  

.responsive .oye-nav ul.oye-hmenu>li>ul

{

   padding: 5px;

}

  

.responsive .oye-nav ul.oye-hmenu>li>ul:before

{

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

}



.responsive .oye-sheet

{

   width: auto !important;

   min-width: 240px !important;

   max-width: none;

   margin-right: 1% !important;

   margin-left: 1% !important;

}



#oye-resp {

   display: none;

}



@media all and (max-width: 1023px)

{

    #oye-resp, #oye-resp-t { display: block; }

    #oye-resp-m { display: none; }

}



@media all and (max-width: 480px)

{

    #oye-resp, #oye-resp-m { display: block; }

    #oye-resp-t { display: none; }

}



.responsive .oye-content-layout, 

.responsive .oye-content-layout-row, 

.responsive .oye-layout-cell 

{

   display: block;

}



.responsive .oye-layout-cell 

{

   width: auto !important;

   height: auto !important;

   border-right-width: 0 !important;

   border-left-width: 0 !important;

   border-radius: 0 !important;

}



.responsive .oye-content-layout:after, 

.responsive .oye-content-layout-row:after, 

.responsive .oye-layout-cell:after 

{

   content: ".";

   display: block;

   height: 0;

   clear: both;

   visibility: hidden;

}



.responsive .oye-post

{

   border-radius: 0;

}



.responsive .oye-footer-inner

{

   width: auto;

   padding: 2% !important;

}

.responsive .oye-footer

{

   margin-top: 1%;

}



.responsive .responsive-tablet-layout-cell 

{

   width: 50% !important;

   float: left;

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

}



.oye-menu-btn-label { display: none; float:right; margin-top:10px; margin-left:10px; color:#ffffff; font-size:18px; text-decoration:none; } .responsive .oye-menu-btn-label { display: block;

speedyp

Posted: 6/23/2013

Quote message

Hi Nick
I think your logo image at the top seems to be grouped in with a bunch of images in some kind of slideshow?

If I were you, I might go back into artisteer. Add your logo as a separate image (plenty posts about this on the forum). Once your logo is on its own, you can target it with some simple css to give it a fixed size if that's what you want.

Also in Artisteer, experiment with the position of your horizontal navigation menu. Try it outside your header and inside your sheet options to see if you can place it without having to fiddle with your css. If you do have to add your own css, you can add this within artisteer - export / options / css and add it there.

Nick

Posted: 6/24/2013

Quote message

yeah, one thing I have been finding is to set the header outside of the sheet and set the menu outside of the sheet. I did this with floridasavingsdirect.com and everything is lining up perfectly.