How to create a header that does not span the whole width

  • Dong Suzuki

    (@sudongyue)


    11 years, 5 months ago

    Here is what I want to achieve. I need to shrink the width of the header, so that the header logo image stays at the upper left corner of the webpage. Then I can move up my stuff from the content page to align with the header image.

    Please take a look at my site. http://www.dongphotography.ca/en/

    You will see a logo on the upper left and followed by some small icons. I achieve this by display:none the header, and everything you see is from the content page. However, I could not find my site in Google search, probably because the header is hidden that affect the SEO. So I want to achieve the same visual layout with a header displayed.

    Or, instead of changing the header width, could you suggest another way?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Dong Suzuki

    (@sudongyue)

    11 years, 5 months ago

    please any thoughts?

    Thread Starter Dong Suzuki

    (@sudongyue)

    11 years, 5 months ago

    I have figured it out. In the Header.php, I just add the HTML codes directly after the <h1> tag. This solves my problem in this site, but I still want to know how people create a header and the navigation on the same level. Please help!

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

    It’s not very clear what your issue was or what you are asking now, but generally, the layout of anything is controlled by the CSS code. If you don’t know much CSS, this is a good reference site:

    http://www.w3schools.com/css/

    Also, be aware that SEO takes into many variables, so one thing may or may not be “the” reason your site is not appearing in Google search results.

    Thread Starter Dong Suzuki

    (@sudongyue)

    11 years, 5 months ago

    Sorry about the confusion. Please let me explain what I meant by using this random site: http://www.danielkennedy.com/

    On top of the page: Daniel Kannedy Photography is the header, and from Celebrity to Retouch is the menus. I am a newbie and as far as I know, the header always by default occupies the whole width of the page. In another word, the Daniel Kannedy Photography should be the only thing you see on the first line of the page, and from Celebrity to Retouch should be the second line. (sorry about the expression. I dont know a better word for lines). What I want to know is how to achieve the design of limit the space of the header, and make space for other page contents or navigation bar.

    Jay Hoffmann

    (@jhoffm34)

    11 years, 5 months ago

    I think what you need is a crash course in HTML5 and CSS. The site you pointed to (http://www.danielkennedy.com) is in Flash, which is not supported in WordPress and quickly becoming a thing of the past.

    It would probably be best to familiarize yourself with the <header> element and the <nav> element which are semantic components that can be styled any way you want.

    I recommend HTML5 Doctor, it’s a great resource.
    Header – http://html5doctor.com/the-header-element/
    Nav – http://html5doctor.com/nav-element/

    Thread Starter Dong Suzuki

    (@sudongyue)

    11 years, 5 months ago

    Thanks a lot for your information!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to create a header that does not span the whole width’ is closed to new replies.