I want to make the logo and menu fixed so it stays on the page as you scroll
can you help?
fixed position for header-logo-menu
8 posts from 3 voices- Started 3 months ago by zoedesign
- Latest reply from Devin
- This topic is not a support question
-
zoedesign
MemberThanks but it did not work :(
the header is fixed but it covers the container and it is too wide.I want the header to be at the very top since is going to be static it should not take too much space
have a look at
http://www.zoedesign.com.au/christine/home/
Thank youPosted 3 months ago # -
Ismael
ModeratorHi,
I didn't know that you are using the boxed layout. Try this one
#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; }Regards,
IsmaelPosted 3 months ago # -
zoedesign
Memberthanks for the reply but it still did not work.
It works for the home page but not the other pages it covers the page title.
http://www.zoedesign.com.au/christine/about/also I want the "shop header and header to start at the very top of the page
thank you
Posted 3 months ago # -
Ismael
ModeratorHi,
Remove everything then try this one
#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; }Let me tag the rest of the support team to help out. Kinda losing ideas here. :)
Regards,
IsmaelPosted 3 months ago # -
zoedesign
Memberheader still covers the page title
http://www.zoedesign.com.au/christine/about/and the css is not working for iphone 4 again header sits on top of page title and is not center
thank you
Posted 3 months ago # -
Devin
ModeratorHi zoedesign,
You'll need to add a margin to the main container to compensate for the fixed logo:
#main { margin-top: 152px; }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.
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.
So add the following to your custom.css file after the first comment:
/* #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*/ }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.
Regards,
Devin
Posted 3 months ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
