Positioning of Links in Header & Footer

Support Area Forums Progress Positioning of Links in Header & Footer

This topic contains 6 replies, has 2 voices, and was last updated by  Bill Robbins 3 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
URL to the page in question: http://markutfilms.com/en/
  • Author
    Posts
  • #21168

    Patrick Markut
    Participant

    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 footer

    The 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 Logo

    Hope you can help me,
    Patrick

    #21171

    Bill Robbins
    Moderator

    Good 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,
    Bill

    #21172

    Bill Robbins
    Moderator

    Good 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,
    Bill

    #21176

    Patrick Markut
    Participant

    Bill,

    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

    #21182

    Bill Robbins
    Moderator

    Patrick,

    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,
    Bill

    #21186

    Patrick Markut
    Participant

    Thank you very much again Bill,

    it worked out perfectly and also I learned some things.

    Best Regards,
    Patrick

    #21188

    Bill Robbins
    Moderator

    Anytime Patrick. Enjoy your weekend.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Positioning of Links in Header & Footer’ is closed to new replies.