Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #19750

    I want to make the logo and menu fixed so it stays on the page as you scroll

    can you help?

    #104843

    Hi

    Add this on your custom.css

    #header {
    margin-bottom: 20px;
    position: fixed;
    top: 69px;
    z-index: 9999;
    background: white;
    width: 100%;
    }

    #shop_header {
    margin-bottom: 162px;
    }

    Regards,

    Ismael

    #104844

    Thanks 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 you

    #104846

    Hi,

    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,

    Ismael

    #104848

    thanks 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

    #104849

    Hi,

    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,

    Ismael

    #104850

    header 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

    #104851

    Hi 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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘fixed position for header-logo-menu’ is closed to new replies.