Positioning of Header objects using CSS

  • Resolved Pjdavo

    (@pjdavo)


    11 years, 4 months ago

    Hi All,

    I’m trying to add a simple blog to my website and want the header objects (Logo and navigation menu) to appear in the same place as on my website (i.e. floating at the left and right sides of the page)

    the website is http://www.phildavisonphotography.com and the blog sits in a subdomain http://www.blog.phildavisonphotography.com

    I’m using the free theme Skeptical from Woothemes and figure i should be able to position things the same with some basic CSS but am fairly new to it and cant seem to figure it out.

    any advice would be much appreciated.

    thanks! :O)
    Phil

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

    (@wpyogi)

    11 years, 4 months ago

    Try this in the custom CSS:

    navigation ul#main-nav {
    margin-top: -100px;
    float: right;
}

    Do similar with the RSS feed using this selector:

    #navigation ul.rss {
}

    Thread Starter Pjdavo

    (@pjdavo)

    11 years, 4 months ago

    Hi WPyogi,

    many thanks, that has certainly made a start. I’m happy with the RSS feed where it is currently.

    however the menu and logo on my website float on the far left and right of the browser window and move as the browser is resized. I’d like the blog page to look and behave in the same way if possible.

    thanks again
    Phil

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    It’s probably possible to do that, but right now the problem is that the navigation is inside elements that have less than 100% widths:

    <div id="header">  set to 80% in CSS
   <div class="col-full">  set to 940px width
      <div id="logo">
       <div id="navigation">
   </div>

    The 940 width is the main problem — as it keeps the navigation from moving further to the right. You might be able to change those width restrictions– try this:

    #header .col-full {
  width: 100%;
}

    Thread Starter Pjdavo

    (@pjdavo)

    11 years, 4 months ago

    woohoo!

    many thanks for the tips!! much appreciated

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Positioning of Header objects using CSS’ is closed to new replies.

Tags