Positioning assistance

  • Resolved Cass

    (@rickcst)


    8 years, 9 months ago

    Hi,

    I’m trying to position the site logo and navigation links in the header. I would like the site logo to line up with the left edge of the photo, and the navigation links to line up with the right edge. I’m also trying to make them responsive when the browser window changes, keeping them lined up along the edges of the photo.

    I’ve tried a lot solutions, and nothing seems to work. I’m using underscores as the starter theme.

    Thanks!

    • This topic was modified 8 years, 9 months ago by Cass.

    The page I need help with: [log in to see the link]

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

    (@chrispink)

    8 years, 9 months ago

    #masthead {
    /* position: fixed; Lose this*/
    /* width: 75%; Lose this*/
    width: 100%;
    /* top: 25; Lose this*/
    max-width: 1200px;
    margin: 0 auto;
    }

    then you need to take some padding out of main to move the content up

    Thread Starter Cass

    (@rickcst)

    8 years, 9 months ago

    Thanks Chris. Though I need to keep the fixed header– I’ve updated the site URL to reflect the reason why.

    Any ideas on how to achieve the fixed header with proper positioning?

    chrispink

    (@chrispink)

    8 years, 9 months ago

    Make a container within the masthead element that has the width, max-width and margin set so.

    so it goes 

    <header id="masthead">
<div class= "inner-container">
Everything else
</div>
</header>

#masthead {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: whatever;
}

.inner-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

    nice photos btw

    • This reply was modified 8 years, 9 months ago by chrispink.
    • This reply was modified 8 years, 9 months ago by chrispink.
    Thread Starter Cass

    (@rickcst)

    8 years, 9 months ago

    Thanks Chris! That worked– I appreciate your assistance. Now I’ve learned how to add some HTML in the header.php file. This is good knowledge for me.

    Glad you like the photos, thanks!

    • This reply was modified 8 years, 9 months ago by Cass.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Positioning assistance’ is closed to new replies.