• Resolved AlicePH

    (@aliceph)


    Hello!
    Thank you for beautiful theme!

    I wonder if it possible to put social icons on top of site, instead current position of menu. And second how to change position of menu? I would like it a bit further down!

    Thank you for support!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter AlicePH

    (@aliceph)

    Just noticed you didn’t add Instagram, nor Pinterest option to social links. Would appreciate so much if you add these options too!

    Best regards
    AlicePH

    Theme Author Fruitful Code

    (@fruitfulcode)

    AlicePH

    You can remove this function from footer.php and add to header.php in place where you want to see social icons.
    <?php fruitful_get_footer_socials_icon(); ?>

    You can add position for menu in theme options > custom css. Do you have some skills? Can you show your website?

    We will add Instagram, Pinterest icons in next plugin version.

    Thread Starter AlicePH

    (@aliceph)

    Hi, thank for answer:)

    Some little skills may be:)
    I found selector for menu now! But I will keep it as in original. I have drop down/under menu and it doesn’t look so good if menu is farther down.

    But other thing… social icons. I tried to du as you said, but i did’n work. Where exactly in header.php do I have to put <?php fruitful_get_footer_socials_icon(); ?> ?

    or du it have to be whole thing? <div class=”social-icon”>
    <?php fruitful_get_footer_socials_icon(); ?>
    </div>

    Tried both but didn’t work.

    My testwebsite http://www.designtre.aliceph.se/

    Thank you!

    Theme Author Fruitful Code

    (@fruitfulcode)

    Insert

    <div class="social-icon">
    <?php fruitful_get_footer_socials_icon(); ?>
    </div>

    before <nav>

    Also you will need to add additional styles to custom css

    #masthead .social-icon {
        float:right
    }
    #masthead .social-icon a {
        float:left;
        width:30px;
        height:30px;
        opacity:1;
        background-image:url(images/social.png);
        background-repeat:no-repeat;
    }
    #masthead .social-icon a:hover, #masthead .social-icon a:active {
        opacity:0.9}
     #masthead .social-icon a.facebook {
        background-position:-249px 0;
    }
    #masthead .social-icon a.twitter {
        background-position:-280px 0;
    }
    #masthead .social-icon a.linkedin {
        background-position:-93px 0;
    }
    #masthead .social-icon a.myspace {
        background-position:-31px 0;
    }
    #masthead .social-icon a.googleplus {
        background-position:-62px 0;
    }
    #masthead .social-icon a.dribbble {
        background-position:0 0;
    }
    #masthead .social-icon a.skype {
        background-position:-125px 0;
    }
    #masthead .social-icon a.flickr {
        background-position:-187px 0;
    }
    #masthead .social-icon a.youtube {
        background-position:-218px 0;
    }
    #masthead .social-icon a.rss {
        background-position:-155px 0;
    }
    #masthead .social-icon a.vk {
        background-position:-311px 0;
    }
    #masthead .social-icon a.email {
        background-position:-342px 0;
    }
    Thread Starter AlicePH

    (@aliceph)

    I don’t know what is wrong but it din work:(

    I did us u said. Header.php looks like this:

    <hgroup>
    								<?php echo fruitful_get_logo(); ?>
    							</hgroup>
    <div class="social-icon">
    <?php fruitful_get_footer_socials_icon(); ?>
    </div>
    							<nav role="navigation" class="site-navigation main-navigation">
    								<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>	
    
    							</nav><!-- .site-navigation .main-navigation -->
    						</header><!-- #masthead .site-header -->
    					</div>
    				</div>
    			</div>
    			<div class="container">
    				<?php do_action( 'before' ); ?>
    				<div class="sixteen columns">

    `
    [Moderator Note: Please post code & markup between backticks (not single quotes) or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    I added custom css as well…

    Theme Author Fruitful Code

    (@fruitfulcode)

    I understand the problem, custom css section don’t see path to image in previous example.

    Use this instead

    #masthead .social-icon a {
        float:left;
        width:30px;
        height:30px;
        opacity:1;
        background-image:url(./wp-content/themes/fruitful/images/social.png);
        background-repeat:no-repeat;
    }

    hey there, Fruitful Code (or AlicePH)!
    in spite of all, could you tell me how to modify menu position?
    And no, I don’t have css skills at all πŸ™

    Theme Author Fruitful Code

    (@fruitfulcode)

    danielkot,

    1. Currently you see menu in header, right corner?
    2. How you want to change position of the menu?
    3. Can you provide link to your website?

    Hey there,

    this is my site: http://strefapotencjalu.home.pl/wordpress-3.8/wordpress/

    I’d like to move menu to the top of site, something like that: http://strefapotencjalu.home.pl/wordpress-3.8/sample.jpg

    thank you πŸ™‚

    Theme Author Fruitful Code

    (@fruitfulcode)

    You can reduce logo size and you will have place for menu items.

    Hello,

    I wanted to center align the top menu bar. Could you help with that. Also could not figure out how to switch the icon of the info column boxes. Thanks

    http://www.jayrol.com

    Theme Author Fruitful Code

    (@fruitfulcode)

    jayroi,

    add this

    .main-navigation {
    width: 960px;
    }
    
    .main-navigation ul {
    width: 500px;
    margin: 0 auto;
    }

    to custom css in theme options

    fantastic. thank you for the awesome theme!

    Alright another questions. Is there anyway to stop the link on the first menu bar. “Example dead link on “portfolio”.also how to make the boxes not go out so far for sub menus. Please look at

    http://www.jayrol.com.

    thanks

    Theme Author Fruitful Code

    (@fruitfulcode)

    jayroi,

    1) You need to add, link to menu with url “#” http://codex.wordpress.org/WordPress_Menu_User_Guide#Adding_Items_to_a_Menu

    2) Drop down menu, on your website at the moment have 500px width, because it’s html tag <ul> too.

    Add this part of code to custom css

    ul.sub-menu {
    width: 280px;
    }
Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Social icons and menu position’ is closed to new replies.