Changes the header.

  • artusartos · Member ·

    I really like the sequential theme that I’m using right now, but I’m having some problems with the header. I would like to (if possible) make the following changes:

    1) I want the header image to go all the way from left to right rather than being embedded into the red.

    2) I want the title description (“Explanations of the Risale-i Nur”) to appear to the right of the title (“Zehra Risale”), rather than below it.

    I don’t really know much about css…I’m not really sure if what I’m asking for is too complicated…but I would appreciate any help (even if it solves only some of the above problems and not all.)

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there,

    1) I want the header image to go all the way from left to right rather than being embedded into the red.

    Let’s give the following a try and see what you think. It does not make the header image go full width, but it makes it as large as what it can be and still retain the responsive nature of the theme where all of the elements in the header area will flow and adjust for all different sizes of windows/screens. 

    .site-header .wrapper {
    width: 100%;
}
.header-image {
    text-align: center;
}
.header-image img {
    width: 100%;
}

    See what you think of the above.

    2) I want the title description (“Explanations of the Risale-i Nur”) to appear to the right of the title (“Zehra Risale”), rather than below it.

    To keep the site description from being cut off on smaller screens, I’ve used a Media Query to limit this change to 625px and wider windows/screens. Below 625px, it reverts to the original design with the description below the title. 

    @media screen and (min-width: 625px)
.show-tagline .site-description {
    left: 210px;
    position: relative;
    top: -50px;
}
body:not(.menu-left) .site-branding {
    padding-right: 220px;
}

    See what you think of the above and let me know.

  • artusartos · Member ·

    Thanks a lot…I think it works, but I have another problem (if you don’t mind). The header is way too big and there is so much space between the picture, menu, and title. It takes up more than half the page…

    Normally, this theme makes sure that the menu bar is on the same line as the title…this doesn’t work for me because my title is too long so it goes to the next line below it (which is why I wanted at least the description of the title to be on the same line as the title itself).

    Anyways, I was wondering the following:

    1) Can I reduce the space between these (title, image, menu) so that the header takes up less space?

    2) Is there a way to bring the menu bar below the image and the center of the header?

  • artusartos · Member ·

    Sorry….I meant my menu bar is too long (not the title). That’s why I can’t have the title on the same line with the menu bar.

  • artusartos · Member ·

    I actually did manage to get the site title on the same line with the menu (because I shortened some of the menu titles)…the space between the title, description, menu, and the image don’t look so bad anymore. So you don’t need to answer my second question.

    Anyways, thank you so much for your time ;)

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Changes the header.’ is closed to new replies.