http://www.kriesi.at/support/tags/fixed-header-position-menu-logo Support Forum - Tag: fixed header position menu logo - Recent Posts en-US Sat, 25 May 2013 10:30:22 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93755 Mon, 28 Jan 2013 17:14:44 +0000 Devin 93755@http://www.kriesi.at/support/ <p>Hi zoedesign,</p> <p>You'll need to add a margin to the main container to compensate for the fixed logo:<br /> <pre><code>#main { margin-top: 152px; }</code></pre> <p>The issues making this big of a change with Propulsion you will run into are the changes for the main layout may not work exactly right for the mobile/tablet layouts and will need minor adjustments for each. That kind of thing isn't something we can directly provide but we can get you started.</p> <p>For the mobile layouts, you can use media queries in the custom.css file in the css folder of the theme files. Each of the queries you can add css adjustments that will only effect your layout at that size. This way you can do the pixel perfect customization you are looking for.</p> <p>So add the following to your custom.css file after the first comment:<br /> <pre><code>/* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { /*css here, you can delete this comment line*/ } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { /*css here, you can delete this comment line*/ } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { /*css here, you can delete this comment line*/ } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { /*css here, you can delete this comment line*/ } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { /*css here, you can delete this comment line*/ }</code></pre> <p>And then you can add in the css as needed. The css Ismael has provided gets you 90% of the way there for a fixed header and the media queries will give you the control to tweak it for the other devices screen size.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93661 Mon, 28 Jan 2013 02:04:14 +0000 zoedesign 93661@http://www.kriesi.at/support/ <p>header still covers the page title<br /> <a href="http://www.zoedesign.com.au/christine/about/" rel="nofollow">http://www.zoedesign.com.au/christine/about/</a></p> <p>and the css is not working for iphone 4 again header sits on top of page title and is not center </p> <p>thank you </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93656 Mon, 28 Jan 2013 01:33:39 +0000 Ismael 93656@http://www.kriesi.at/support/ <p>Hi,</p> <p>Remove everything then try this one</p> <pre><code>#header .container { min-height: 50px; padding: 25px 0; border-bottom: 1px solid; z-index: 100; position: fixed; margin-left: 30px; background: white; margin-top: -35px; } #shop_header { margin-top: -30px; }</code></pre> <p>Let me tag the rest of the support team to help out. Kinda losing ideas here. :)</p> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93611 Sun, 27 Jan 2013 17:15:11 +0000 zoedesign 93611@http://www.kriesi.at/support/ <p>thanks for the reply but it still did not work.<br /> It works for the home page but not the other pages it covers the page title.<br /> <a href="http://www.zoedesign.com.au/christine/about/" rel="nofollow">http://www.zoedesign.com.au/christine/about/</a></p> <p>also I want the "shop header and header to start at the very top of the page </p> <p>thank you </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93582 Sun, 27 Jan 2013 03:14:25 +0000 Ismael 93582@http://www.kriesi.at/support/ <p>Hi,</p> <p>I didn't know that you are using the boxed layout. Try this one</p> <pre><code>#top #slideshow_big { margin-top: 142px; position: relative; } #header .container { min-height: 50px; padding: 25px 0; border-bottom: 1px solid; z-index: 100; position: fixed; margin-left: 30px; background: white; }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93564 Sun, 27 Jan 2013 00:50:36 +0000 zoedesign 93564@http://www.kriesi.at/support/ <p>Thanks but it did not work :(<br /> the header is fixed but it covers the container and it is too wide.</p> <p>I want the header to be at the very top since is going to be static it should not take too much space<br /> have a look at<br /> <a href="http://www.zoedesign.com.au/christine/home/" rel="nofollow">http://www.zoedesign.com.au/christine/home/</a><br /> Thank you </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93553 Sat, 26 Jan 2013 23:49:07 +0000 Ismael 93553@http://www.kriesi.at/support/ <p>Hi</p> <p>Add this on your custom.css</p> <pre><code>#header { margin-bottom: 20px; position: fixed; top: 69px; z-index: 9999; background: white; width: 100%; } #shop_header { margin-bottom: 162px; }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/fixed-position-for-header-logo-menu#post-93492 Sat, 26 Jan 2013 02:55:07 +0000 zoedesign 93492@http://www.kriesi.at/support/ <p>I want to make the logo and menu fixed so it stays on the page as you scroll<br /> can you help? </p>