add padding at top of page

  • Posted in : TheBlogger
  • Steve B
    Participant

    Was hoping you could help me with this:

    We have been looking all over for a floating share bar that can be on left or right of screen (on mobile and tablet) but they all seem to be either on the top or bottom. We have an ad at the bottom so it won’t work there and at the top there is the mobile menu button and follow icons & ad ad one of the sites.

    Was wondering if there would be some CSS that would add some padding to the whole top of the sites (basically push all the content down maybe 30 px) so that when we add a top share bar, it won’t cover anything up! And have that effect only mobile and tablet. We need to do it on all 3 of our sites – http://www.thegardenglove.comhttp://www.decoratingyoursmallspace.comhttp://www.thebudgetdecorator.com

    Would it be the same code for all three?

    Thanks so much!

    serkan
    Moderator

    Hi, As an example, would you add a top share bar to a website? This gives us the opportunity to test more clearly. Did you disable the tablet and mobile view of the share button?

    Steve B
    Participant

    hey Serkan –
    The problem is that I don’t want to add the top share bar until after I have a way to add some blank space to the top. If I do, it will cover the content at the top of the sites.
    If there was a way to just add some blank white space at the top (on mobile and tablet only) by adding some padding or something to the header that would be great.
    Right now we just have ‘addthis’ floating share bar on left for desktop only.

    Here is a link to a screen shot of with and without the top ‘addthis’ share bar and you can see how it covers up the menu icon and follow icons at the top of the page.
    Hoping there is some easy css to add to just add the extra space at the top. and drop down the whole page.

    http://www.thebudgetdecorator.com/wp-content/uploads/2017/06/Screen-Shot-2017-06-22-at-11.34.39-AM.png

    Thanks!

    serkan
    Moderator

    Hi,
    I will ask this issue to the plugin’s author and will keep you updated.

    Steve B
    Participant

    Hey Serkan –
    I think there has been a bit of a mis-communication on this.
    I don’t think this is a plug-in specific issue. It seems all the social sharing plugins out there seem to cover (go over the top) of content when using a top or bottom share bar. Right now we are using “addthis” and that is what the screen shot is of.
    I thought for sure that there would be some simple css that you would easily come up with, that would just simply create some extra padding (blank space) at the top, where the share bar could go without covering up the content at the top of the page. (on mobile and tablet only)
    So that is not possible?

    Thanks for your help!

    serkan
    Moderator

    Hi Steve,
    I just found a mismatch when you put up the share bar on mobile. I would like to find a healthier solution than finding a solution with CSS code.
    You can use this custom css code for now.

    .essb_topbar { margin-top: 48px; }

    Thanks

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

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register