WordPress.org

Support

Support » Themes and Templates » Tiny Forge » [Resolved] move links up to be horizontal with menu

[Resolved] move links up to be horizontal with menu

  • Hi–

    I am close to finishing the site, but I did have a question about moving up the message me/Facebook/Twitter links so that they appear horizontally in line with the menu.

    I am using the following code (on the Appearance/widgets page) to insert the links in the side bar as text. Can I move the links up? And would this somehow interfere with the look of the site on a smaller (phone) screen?

    Many thanks for any help!

    Code I am using:`<a href=”http://webyarns.com/wordpress/?p=209″ class=”icon-webfont el-icon-user” title=”Contact me”></a>
    <a href=”http://address-to-facebook-account” class=”icon-webfont el-icon-facebook” title=”Facebook”></a>
    <a href=”http://twitter.com/your-twitter-handle” class=”icon-webfont el-icon-twitter” title=”Twitter”></a>
    <a href=”https://plus.google.com/your-g-plus-account-number” class=”el-icon-webfont icon-googleplus” title=”Google ” rel=”author”></a> `

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi, it’s rather hard to answer without having access to your page. The snippet of code above doesn’t give any info on the links’ relationships with the other elements, hence on how moving the links would affect the overall layout. Please, post a link to your page and I’ll see if I can help.

    Hi–

    Here you go. Thanks very much!

    Oops. Link vanished:

    http://www.webyarns.com/wordpress

    You can see the three links (grayish in color and bright green when mouse overed) on the right. Thanks again!

    I’ve had a look both at your page and at the theme’s code in the repository. As it is, it’s possible to move the social links up to be in line with the menu links. However, this will interfere with the menu at smaller screen sizes. Still, you can use media queries to adjust the widget’s position. The CSS to move the existing widget is: .widget .text-widget {position: relative; top: -60px;}. Then adjust its left position at different screen sizes using media queries until the mobile menu appears. Then, the widget naturally places itself in the sidebar below.

    You find media queries in style.css (12.0 Media queries) in your theme (I recommend using a child theme or custom css plugin).

    If you need a tutorial on how to apply media queries, here’s a good one on CSS-tricks.com:

    Logic in Media Queries

    Thank you very much, antonietta456. I will give this a try and report back. Thanks again!

    That worked like a charm! To be honest, now that I see what it looks like, I’m going to stick with the original (better look), but your css was perfect. Thanks again for the code and taking the time.

    If I may ask, there is one other problem I have not been able to fix? The logo for the site is just where I want it to be, but it does not appear on the iphone. There is a post on this, but it does not seem to resolve the problem:

    How to use Tiny Framework and its child themes: a comprehensive guide

    Any thoughts on this would be really great!

    Can you see logo on iPhone in mtomas.com? If yes, then the solution is right. Perhaps you missed something?

    Hi, Tomas–

    Yes, I got it to do that, as well. My hope (although it may not be possible) is to have the logo and title remain side by side (as it currently does on my site, viewing via laptop), rather than have the logo above the title, as it appears in mtomas.com.

    It depends on the length of text. If text would be shorter, they would be side by side. Try to resize your browser to see it. You may have to make font size smaller or text shorter.

    Ok, I will try that. Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] move links up to be horizontal with menu’ is closed to new replies.
Skip to toolbar