Canvas Slider

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #7730
    Neil Chatterjee
    Participant

    Hi Jamie

    I am using Canvas to design my website. I have got my header in place and underneath that I have my primary menu. Underneath the menu I have a slider. Everything is functioning fine.

    However, I feel there is too much space between the primary menu and the top of the slider images. How can I reduce this space?

    NB. I do not wish to change the size of the slider images.

    Neil

    #7731
    Jamie Marsland
    Keymaster

    Hi Neil,

    I agree there is too much space …here’s the code you need. Just reduce the 3em to suit.

     

    #7734
    Neil Chatterjee
    Participant

    Thank you, that worked a treat.

    #7764
    Neil Chatterjee
    Participant

    Hi Jamie

    I set the code as #navigation {margin-bottom: 0em;} and now the space between the Nav Bar and the slider looks just right.

    1. However, when I looked at the other pages I noticed that the page title and the widgetized areas on the right are now tight up against the Nav Bar. Is there a way that I can direct this HTML code just for the Home Page without it impacting on all the other pages? Ideally, I’d like the space between the Nav Bar and the widgetized area for the other pages to be 2em or 3em.

    2. I have been building the site via IE9 and noticed that when I looked at the site via Firefox and Chrome that the HTML code, although present, was not having any effect on the space between the Nav Bar and the slider. Is there anything I can do about this?

    Regards

     

    Neil

    #7778
    Jamie Marsland
    Keymaster

    Try this Neil

    .home #navigation {

    margin-bottom: 0em;

    }

    Re the browsers – can you make sure you have cleared your cache when you are testing. It works find and i am using Firefox.

    Jamie

    #14412
    Gareth Jenkins
    Participant

    I’m having trouble reducing the space above my slider and beneath the primary nav as below:

    http://ryedaleschool.morezest.com/

    have added the custom css as follows, including suggested css for reducing the gap to nothing:

    #navigation {

    position: relative;
    margin-bottom: 3em;
    margin-left:-30px;
    width:1300px;
    }

    .sub-menu {
    font-size:125%;
    }

    .home #inner-wrapper {
    background-white: transparent !important;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }

    .site-title,.site-description{text-indent:-9999px;}

    .home .breadcrumbs {

    margin-bottom: 0;

    }

    #top-nav {
    float: right;
    }

    #main-nav {
    clear: left;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    left: 50%;
    text-align: left;
    }
    .nav li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
    }
    .nav li:hover, .nav li.hover {
    position: relative;
    }
    .nav li ul li {
    left: 0;
    }

    Any ideas anyone?

    #14413
    Gareth Jenkins
    Participant

    Just found the answer to this on another forum:

    .page-template-template-biz-php #nav-container {
    margin: 0;
    }

    Great!!

    #14414
    Jamie Marsland
    Keymaster

    Great well done :)

    Jamie

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
Scroll to Top