WordPress.org

Forums

Tiny Forge
[resolved] move links up to be horizontal with menu (12 posts)

  1. eabigelow
    Member
    Posted 1 year ago #

    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> `

  2. Maria Antonietta Perna
    Member
    Posted 1 year ago #

    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.

  3. eabigelow
    Member
    Posted 1 year ago #

    Hi--

    Here you go. Thanks very much!

  4. eabigelow
    Member
    Posted 1 year ago #

    Oops. Link vanished:

    http://www.webyarns.com/wordpress

  5. eabigelow
    Member
    Posted 1 year ago #

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

  6. Maria Antonietta Perna
    Member
    Posted 1 year ago #

    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:

    http://css-tricks.com/logic-in-media-queries/

  7. eabigelow
    Member
    Posted 1 year ago #

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

  8. eabigelow
    Member
    Posted 1 year ago #

    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:

    http://mtomas.com/389/tiny-forge-framework-child-themes-comprehensive-guide#Enable%20Site%20Logo%20for%20mobile%20view

    Any thoughts on this would be really great!

  9. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

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

  10. eabigelow
    Member
    Posted 1 year ago #

    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.

  11. Tomas Mackevicius
    Member
    Theme Author

    Posted 1 year ago #

    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.

  12. eabigelow
    Member
    Posted 1 year ago #

    Ok, I will try that. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic