Hey there! Sign in to join this conversationNew here? Join for free
    • Thread Starter
    Offline

    11
    ReputationRep:
    I can't work out why my heading is centred in its background colour but my navbar is below the centre.

    The CSS is the same for each of them:
    Spoiler:
    Show
    .menu {
    padding: 20px;
    background-color: #EEEEEE;
    }


    h1 {
    padding: 20px;
    background-color: #EEEEEE
    }
    Attached Images
     
    Offline

    0
    ReputationRep:
    (Original post by benplumley)
    I can't work out why my heading is centred in its background colour but my navbar is below the centre.

    The CSS is the same for each of them:
    Spoiler:
    Show
    .menu {
    padding: 20px;
    background-color: #EEEEEE;
    }


    h1 {
    padding: 20px;
    background-color: #EEEEEE
    }
    The children of the navigation bar (Item One, Two..) are most likely floated. Since it seems you're already using bootstrap, simply add the class clearfix to the navigation bar itself.

    If you want to understand why this happens, read All About Floats (specifically, "The Great Collapse" section).
    • Thread Starter
    Offline

    11
    ReputationRep:
    (Original post by gavrilov)
    The children of the navigation bar (Item One, Two..) are most likely floated. Since it seems you're already using bootstrap, simply add the class clearfix to the navigation bar itself.

    If you want to understand why this happens, read All About Floats (specifically, "The Great Collapse" section).
    Thanks, that article made sense. They were floated using bootstrap's pull-left class, I didn't think to check there.
    Offline

    12
    ReputationRep:
    There is no need for ugly hacks and additional presentational markup. Just set overflow:none; in the parent container in the CSS. top tip
    • Thread Starter
    Offline

    11
    ReputationRep:
    I've put them all in a <nav class="navbar"> which seems to fix this as well as being necessary for shrink-on-scroll.
 
 
 
  • See more of what you like on The Student Room

    You can personalise what you see on TSR. Tell us a little about yourself to get started.

  • Poll
    Did TEF Bronze Award affect your UCAS choices?
    Useful resources
  • See more of what you like on The Student Room

    You can personalise what you see on TSR. Tell us a little about yourself to get started.

  • The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

    Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

    Quick reply
    Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.