Positioning of Links in Header & Footer
Support Area › Forums › Progress › Positioning of Links in Header & Footer
- This topic has 6 replies, 2 voices, and was last updated 9 years, 8 months ago by Bill Robbins.
-
AuthorPosts
-
July 25, 2014 at 04:13 #21168Patrick MarkutParticipant
Hi Bill,
after a while I made some changes to my website and there is a last thing I don’t know how to do.
I’m aiming to put links to:
1. top right corner of the header
2. mid right of the header
3. top centre of the footerThe only positionings I figured out myself for the header:
<div class=”left”…. – under the Logo
<div class=”right”…. – besides the Main Menu
<div class=”centered”…. – very top right of the LogoHope you can help me,
PatrickJuly 25, 2014 at 07:35 #21171Bill RobbinsModeratorGood Morning Patrick,
Most likely we can make that happen. Are you wanting to add move links in your navigation menu or add new links in addition to those? Let me know and we’ll go from there.
Thanks,
BillJuly 25, 2014 at 07:35 #21172Bill RobbinsModeratorGood Morning Patrick,
Most likely we can make that happen. Are you wanting to add move links in your navigation menu or add new links in addition to those? Let me know and we’ll go from there.
Thanks,
BillJuly 25, 2014 at 08:41 #21176Patrick MarkutParticipantBill,
just forget what I aimed to do in the first half of the opening post and I’ll be very specific now.
1.
Basically I just want to put little flag icons into the Header to change the language by clicking on them (english and german websites are prepared already).I figured out how to put the icons including links into the header by editing the header.php.
In the second half of my opening post I listed what positions I already figured out.
But I just couldn’t figure how to put them where I actually want them to be.To show you where I want them to be I attached an photoshopped Image.
2.
Secondly I want to put one Link (and more in the future) to the middle of the footer.
For that I also uploaded an image.Patrick
Attachments:
July 25, 2014 at 09:05 #21182Bill RobbinsModeratorPatrick,
No problem. You can do those things. For the flag icons, you’ll want to edit the header.php file. Right above this spot:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'nav' ) ); ?>
you’ll want to add in your flags. I would add them by wrapping them in a div with a unique ID which would look something like this:
<div id="flag-icons"> <a href="http://link-one.com"><img src="http://yoursite.com/flag-one.png" /></a> <a href="http://link-two.com"><img src="http://yoursite.com/flag-two.png" /></a> </div>
You’ll need to replace the URL’s with the ones for your different language sites and for the respective image files too. Then you can go edit the style.css file. At the bottom of it, you can add in styling to absolutely position the flags exactly where you’d like them to go. That would look something like this:
#flag-icons { position: absolute; top: 20px; right: 20px; }
which will place the icons 20 pixels from the top of the screen and 20 pixels from the right of the content area’s edge. You can adjust those to find the right spot for them.
For the footer links. You’ll need to edit the footer.php file. Find this line:
<div class="footer-right right">
and create a new line above that. You can then enter this there:
<div id="footer-middle"> <ul> <li><a href="http://link.com">Link</a></li> <li><a href="http://link.com">Link</a></li> <li><a href="http://link.com">Link</a></li> </ul> </div>
Update the list there with your own links and save your changes. Then back at the bottom of the style.css file you can add this:
#footer-middle { margin-left: 20%; } #footer-middle ul { list-style-type: none; margin: 0; }
The first style there you can use to adjust how far over the links are from the end of the footer left. The second style will make sure there are no bullets by the list items.
See how that works out for you,
BillJuly 25, 2014 at 10:54 #21186Patrick MarkutParticipantThank you very much again Bill,
it worked out perfectly and also I learned some things.
Best Regards,
PatrickJuly 25, 2014 at 11:00 #21188Bill RobbinsModeratorAnytime Patrick. Enjoy your weekend.
-
AuthorPosts
- The topic ‘Positioning of Links in Header & Footer’ is closed to new replies.