Center menu and move to bottom of blue header

  • Resolved advent12

    (@advent12)


    8 years, 5 months ago

    Hi there,

    I was wondering if there was css to move the menu (home, service etc.) to the bottom of the blue header, rather than floating in the middle of the blue.

    Also wondering if it could be centered. I found some code, but I’m not sure it’s quite right.

    siteWebsite

Viewing 4 replies - 1 through 4 (of 4 total)

  • #site-navigation { margin-top: 37px; }

    adust the number value to your liking…

    Add following style in css file
    #site-navigation ul {
    margin-top: 40px;
    }
    and it will also work for responsive design.
    Enjoy !!!

    Thread Starter advent12

    (@advent12)

    Thanks very much.

    It has the desired effect on mobile and laptop. On tablet however it puts the logo on top of the menu, skewed left.

    Is it possible for the logo and the menu to exist side by side?

    Thread Starter advent12

    (@advent12)

    I have the following code for the logo…perhaps it interferes.

    /* Increases header area to make room for larger logo*/
    #main-nav {
    min-height: 100px;
    }

    /* Increases logo size*/
    a.navbar-brand {
    height: 100px;
    padding: 0 15px;
    width: auto;
    }

    .navbar-brand > img {
    margin-left: -110px !important;
    margin-top: 10px !important;
    }

    .navbar-brand > img {
    margin-top: 0 !important;
    height: 100px !important;
    width: 480px !important;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Center menu and move to bottom of blue header’ is closed to new replies.