White space below menu

  • Resolved Edwin

    (@mmhgloba)


    4 years, 4 months ago

    Hello, there is a white space between Smart Slider 3 and the header secondary menu (on all devices). I have tried all the options listed here but none of them work. Additionally, I have contacted the theme developer and they sent me some code which partially solved the problem (the white space used to be much larger).

    This is the current code I am using:

    .home #content-sidebar,.home #content #post-2 {
    padding-top: 0 !important;
    }

    #main {
    margin-top: -20px;
    }

    Any feedback you can provide will be much appreciated. The Smart Slider needs to be against the menu with no white space on all devices.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 28 total)
  • Plugin Support Laszlo

    (@laszloszalvak)

    Hi @mmhgloba

    The gap is coming from the bottom margin of the <header> element which appears above the container where you published the slider.

    You could also add this custom CSS:

    div#main header.entry-header{
  margin-bottom:0px;
}

    and that will eliminate this white space.

    Best regards,
    Laszlo.

    Thread Starter Edwin

    (@mmhgloba)

    HI Lazlo, that worked, but now there is another issue. The sub-menu does not function. It is not possible to click on the links in the sub-menu. Can you assist?

    Thread Starter Edwin

    (@mmhgloba)

    I think I resolved this, the previous code was causing it.

    #main {
    margin-top: -20px;
    }

    I removed it so it works fine.

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @mmhgloba

    I am glad you managed to find the cause of the problem!
    In this case I marked this topic as resolved.

    Thread Starter Edwin

    (@mmhgloba)

    Hi Lazlo,

    I wanted to talk to you about something else. First of all, thanks for the fast reply and also the slider, it works great and enhances my website significantly.

    1) I want to create landing pages, not just on the home page. But the white space appears again such as here: https://iglobal.net/16345-2/ I have entered the code you sent on the this website also, and removed the other code referenced immediately above, but it still does not work on any other pages, only the home page. Can you assist?

    2) Also, regarding the slider layers, is it possible to change the button and header font size between devices? I am not able to do this. If I change the desktop size it adjusts the mobile size vice versa. The font should be larger on Desktop, but it blow out on the mobile device. Can you assist? Case in point would be goldenbuddha.net

    Thanks again,
    Edwin

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi Edwin!

    1.) The gaps above and below the slider are also coming from your theme as margin and padding. The previous CSS won’t work on this page, since the “home” class is only present on the homepage. Anyways this CSS will most likely work on your other pages, too:

    div#main #content-sidebar{
  padding-top: 0;
}

div#main #content > article{
  padding: 0;
  margin-bottom: 0;
}

    However if you only want to apply this on certain pages, then you will need to inspect the HTML and CSS of your pages and modify the CSS selectors according to the way, it will only target the elements that you would like. E.g.: if you would like to apply this CSS on a specific page, then you could target only those elements by making your CSS more specific by adding the “body.page-id-16345” selector before the CSS where you need to replace 16345 with the ID of your WordPress page.
    You can find this by either:
    -opening the page for edit and checking the URL ( it will appear like: /wp-admin/post.php?post=16345&action=edit )
    -or you can inspect the HTML and check the class list of the <body> element.

    If you are not that familiar with inspecting the HTML and style with the browser, here you can find a guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-styles
    or you could get in touch with the developers of your theme and ask them to adjust the style of the theme for your needs.

    2.) We have some device specific options what you can adjust separately for each view. A device specific setting can be usually recognized from the small screen icon, next to its name.
    So the setting what you are actually looking for is called “Text Scale” and can be found on the Style tab of the layer:

    With this, you will be able to make device specific font size adjustments.

    Best regards,
    Laszlo.

    Thread Starter Edwin

    (@mmhgloba)

    Hi Lazlo,

    Your suggestions about the second issue worked great, that is resolved. But the first issue is only partially resolved.

    I used the suggestion of adding the specific body page id “body.page-id-16345” before the selector and that worked to remove the gap on the specific page.

    However, I noticed that on my woocommerce products listing pages the space is also removed. Such as here https://iglobal.net/product/st-kitts-and-nevis-citizenship-by-investment/ but it looks better with the normal space intact.

    I think this is caused by the previous code entry:

    div#main #content-sidebar{
    padding-top: 0;
    }

    Can it be adjusted to exclude the woocommerce product pages? Everything else seems to be fine.

    Thanks in advance,
    Edwin

    Plugin Support Gabor

    (@nextendweb_gabor)

    Hi Edwin!

    If you would rather go to the slider’s Developer tab:
    https://smartslider.helpscoutdocs.com/article/1806-slider-settings-developer
    and use the CSS field instead of where you are currently writing your code, then this CSS code only loads into the page where the slider is, so it wouldn’t load on the WooCommerce pages.

    Thread Starter Edwin

    (@mmhgloba)

    Works very well – Thanks!

    Thread Starter Edwin

    (@mmhgloba)

    Hi Lazlo, the css solution you provided works great with the wordpress pages but the small space still appears when I try to use the smart slider on my wordpress posts. Can you assist with the css adjustment?

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @mmhgloba

    Could you send me a link please where I can see the problem occur?
    Since on the earlier linked pages where there is a slider, I currently can not see THE gap appear.

    Thread Starter Edwin

    (@mmhgloba)

    This time it is a post instead of page. I did everything the same with CSS, but the small gap is present again.

    https://goldenbuddha.net/buddhist-gods-guide-buddhist-pantheon/

    Also, if I put a button on the page, when clicking it can we adjust the direction to the H1 tag below? so it just scrolls down and the visitor can begin reading.

    Thank you

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @mmhgloba

    Gap:
    I checked the linked post and I can see two problems:
    1.) the CSS selector on the page is not closed, there is a } missing from its end:

    body.page-id-5598 div#main #content > article{
  padding: 0;

    2.) In this post the CSS selector of the body element is actually: postid-5598 instead of page-id-5598.
    But as I see you have the slider added to the slider directly, and that will ensure that this CSS is only loaded on the page/post where you have this slider published. So in this specific case it isn’t really required to use the “body.postid-5598” selector either.
    Using a CSS here like:

    div#main #content > article{
  padding-top: 0;
}

    will be enough.

    Note: on this post reducing the top padding only is enough, as the bottom padding and the bottom margin is at the bottom of the page, and it is probably necessary to have some space between the footer and the “Buddhist Blog” text.

    Button that scrolls to an element on click:
    In the Free version we don’t have a smooth scrolling feature, sorry and on this forum we are only allowed to provide support for the Free version. So if you are a Pro user or you are interested in this feature, then please get in touch with use directly over the ticket system: https://smartslider3.com/contact-us/support/?ref=https://www.ads-software.com/support/topic/white-space-below-menu-2/

    What you could do in the Free version is anchor jumping. So if the <h1> tag below the slider would have a HTML ID, then you could anchor jump to the element when the button is clicked. E.g.: if the ID of your <h1> element is “my-heading” without the quotes, then then you should insert the “#my-heading” into the link field of the Button layer, of course without the quotes.

    Best regards,
    Laszlo.

    Thread Starter Edwin

    (@mmhgloba)

    Hi Laszlo,

    I tried to enter the code:

    div#main #content > article{
    padding-top: 0;
    }

    But it did not work, in fact the white space got larger. Did I do it incorrectly? I do not have a programming background. So this is a little bit confusing.

    Can you write out the code and show it to me so I can copy and paste it? Then I can use it for other posts by just inserting the new post number. This works fine for pages, but for some reason I cannot get the posts to work with the information provided

    However, I do know how to create the anchor jumping html code you referenced. But where do I insert it in smart slider so it will redirect when the button is clicked?

    Thank you,

    Edwin

    Thread Starter Edwin

    (@mmhgloba)

    Ok, I had a moment of reflection, and the css works now. But can you assist with the Anchor jumping html question?

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘White space below menu’ is closed to new replies.