header and menu alignment

  • Resolved tassiepete

    (@tassiepete)


    9 years, 7 months ago

    Hi,

    I’m trying to get the header image and the left-hand justified menu (as per below) to both align responsively. Currently the header is fixed to what ever indentation that I put in the top_nav section, while the menu adjusts responsively.

    .top_nav { margin-left: 0px; } .menu_main { float: left; width: 75%; } .wrapper, #page { margin: 0px; width: 75%; } .logo{ display: none; } .copyright_info { background: none repeat scroll 0 0 #fff; }

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

  • Hi,

    Share the website URL and Screen-Shot also.

    Thanks

    Thread Starter tassiepete

    (@tassiepete)

    sorry for the delay, was waiting for the DNS to go through

    https://campus.woodsolutions.com.au/

    Hi,

    Go to Dashboard Admin Panel >> Appearance Menu >> Theme Options >>

    General Option >> Custom Css.

    Now write the given below CSS rules into custom CSS editor.

    .top_nav .right { margin-left: 167px; }
    .container { margin-left: -90px; }

    Now save the changes.

    Thanks

    Hi,

    Sorry for inconvenience.

    Use this solution instead of above solution:

    Go to Dashboard Admin Panel >> Appearance Menu >> Theme Options >>

    General Option >> Custom Css.

    Now write the given below CSS rules into custom CSS editor.
    .menu_main {
    margin-left: -275px;
    }

    Now save the changes.

    Thanks

    Thread Starter tassiepete

    (@tassiepete)

    Hi,
    I have used the second option that you provided (and tested the first).

    the second option works better, but when the web browser become narrow the menu goes off the left hand side of the page now. if it is much wider is spaces nicely with the header image as it should.

    I changed the pixel spacings around a few times, but I couldn’t seem to get it to match well.
    cheers,

    Hi,

    write the given below CSS rules into custom CSS editor.

    .menu_main {
    float: right;
    width: 100%;
    }
    #header .container {
    float: left;
    }
    .top_nav {
    margin-left: 30px;
    }

    And save the changes.

    Note: We are not responsible for theme responsiveness.

    Thanks

    Thread Starter tassiepete

    (@tassiepete)

    thanks for that,

    not quite perfect, but worked pretty much correctly

    thanks again,
    please mark as resolved

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘header and menu alignment’ is closed to new replies.