Moving Widget to top of page

  • Author
    Posts
  • #87897

    3dmarco
    Member

    Hello, great theme. I needed an upgrade and this was a great choice so far. I was wondering if I could use CSS to move the widget up to the top of the page. I have text html with image buttons and menus that I’d like to move around. I had a way to do it for my previous theme, Gridspace. Thanks again for the help, and have a good day!

    The blog I need help with is mgarciadigital.wordpress.com.

    #88068

    binarymoon
    Theme Author

    Hi there – really pleased to hear you like the theme! :)

    I like what you’ve done with the colours. Quite striking and fits the artwork really well.

    I assume you want to move the social media and contact links around. Technically they can be moved with css as you suggest. How did you want them positioned?

    I may need to tweak the theme slightly to make this possible without messing things up which may take a while since the wordpress.com team who check all code changes are mostly off for the holiday break.

    #88071

    3dmarco
    Member

    I mostly wanted to move the buttons and contact links to the top right corner, where the “about” link is so it looks they are in the menu area. Under the line, pretty much.

    #88134

    binarymoon
    Theme Author

    Hi there – so I’ve experimented with this and have had trouble coming up with anything perfect that does what you want. The issue is that because the header changes height based on the browser size the menu position is impossible to predict so the position breaks.

    What you could do is put the contact info in the header next to the logo?

    To do that you could use this:

    #text-7.widget {
    position: absolute;
        top: 20px;
        padding: 0;
        text-align: right;
        width: 150px;
        right: 20px;
        border: none;
    }

    Would something like that be ok?

    #88160

    3dmarco
    Member

    That sounds fine, though I can’t get it to show on the page. Thanks again for the help.

    #88161

    binarymoon
    Theme Author

    This will only work on the single blog post page since that’s where you have the widgets. I couldn’t see any widgets on the homepage.

    If you add widgets to the footer then the code would need to be changed since the widget will have a different id so need to be targeted differently with the css.

    #88165

    3dmarco
    Member

    Ok, I’ll add it to the footer then try to move that. There’s no way to show the sidebar in the homepage?

    #88166

    binarymoon
    Theme Author

    I’m afraid not. The footer widgets are the only ones that display on every page. Thinking about it now I must admit I’m not entirely sure adding it to the footer will work. I think it will depend if you want to add other widgets to the footer or not in the future. I don’t think you’ll be able to do both.

    #88167

    3dmarco
    Member

    My main reason for wanting to move the widget was because I had the icon html with buttons instead of just the text that would link you to another page. Is it possible for me to have the icons in the widget somewhere next to the header, or maybe next to the “Top” Menu?

    That is my goal, so maybe it’s possible without using the widgets. Let me know what you think.

    THanks again for the help!

    #88176

    binarymoon
    Theme Author

    In that case – maybe what we could do instead is add the links to the custom menu that’s displayed under the header, and then add the icons to the menu items?

    That is probably a cleaner way to do it.

    If that’s ok then if you add the links you want then I’ll have a think about the best way to add the icons – I can think of two or three different methods so I need to decide which is most appropriate.

    #88180

    3dmarco
    Member

    Sure, that sounds good. Where should I drop the HTML?

    #88181

    binarymoon
    Theme Author

    No need for html – just add the links through the custom menu editor in the Customizer:
    https://en.support.wordpress.com/menus/

    #88185

    3dmarco
    Member

    I updated the menu with the links that will have the icons. I will probably remove the “About” page, but I’ll work that out later.

    #88200

    binarymoon
    Theme Author

    Cool – I think I have a solution now as well. I shall make some tweaks to the css and update the theme. I think you may need to make some tweaks to the menu and then the icons will appear for the items you select.

    #88202

    3dmarco
    Member

    Wow, thanks a lot! Can’t wait. Greatly appreciate the extra help.

    #88203

    binarymoon
    Theme Author

    ok – I think I have it working – but it’s a bit experimental so may need tweaking! :)

    What you need to do is add the class ‘icon’ to any links that you want to have the social media icon added to.

    You may need to enable the class option through the menu options – https://cloudup.com/cWVZ1FAw7u5

    #88204

    3dmarco
    Member

    I entered “icon” on the artstation CSS classes field, but nothing displays.

    #88205

    binarymoon
    Theme Author

    I see a link icon display on the Artstation menu item. I thought you wanted the social media icons?

    If you add icon to Twitter and Google+ then the icons for the social channels will show up. You can also remove the label to make it just the icon.

    The icons use the url destination to work out what the icon should be – so link to twitter and it will use the twitter logo. It will also work for mailto links (adding an envelope)

    #88206

    3dmarco
    Member

    This is what I see in the menu options. I can’t get the icons to show.

    https://www.dropbox.com/s/hizlimt3qolline/MenuLogos.PNG?dl=0

    #88207

    3dmarco
    Member

    Ok, I see them now. Is it possible to make them bigger?

The topic ‘Moving Widget to top of page’ is closed to new replies.