Education Theme Header Menu

Community Forums Forums General Discussion Education Theme Header Menu

This topic is: not resolved

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  macnrwanda08 10 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #82914

    macnrwanda08
    Participant
    Post count: 4

    Hello,

    I’m customizing the Education Theme for a client. I would like the “Title” to spread completely across the top of the page as if there were no header widget.

    Then I would like the header menu to span across the entire page just below the “Title” but with the css styles that are buildt into the header widget menu area.

    How can I do this?

    #82979

    cwalsh
    Participant
    Post count: 95

    Hi macnrwanda08,

    You should be able to achieve this by making a few small CSS adjustments.

    Set your title-area width to 100%

    #title-area {
    float: left;
    overflow: hidden;
    padding: 27px 0 0;
    overflow: hidden;
    width: 100%;
    }

    Set your widget-area width to 100%

    #header .widget-area {
    float: right;
    min-height: 95px;
    padding: 25px 0 0 0;
    position: relative;
    width: 100%;
    }

    Then set the float of your #header .menu to left

    #header .menu {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    background: #f8f8f8;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    bottom: 0;
    clear: both;
    color: #747474;
    float: left;
    font-size: 14px;
    position: absolute;
    right: 0;
    text-shadow: #fff 1px 1px;
    }

    Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

    #83755

    macnrwanda08
    Participant
    Post count: 4

    Thanks so much! This worked perfectly!

    #83763

    macnrwanda08
    Participant
    Post count: 4

    Now, I would like to insert a square logo to the left of the text.

    I tried using background image and it looks fine except when the window size is small and then the words move on top of the logo and it doesn’t look good.

    I know just enough css to get myself in trouble!

    Any thoughts?

    Another thought was to insert a banner image with logo and text, but if I insert a full length banner image what will happen to the responsiveness of the design?

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

You must be logged in to reply to this topic.