Okay
  Public Ticket #2408144
Left Header White Space
Closed

Comments

  •  4
    Benny started the conversation

    Hi there! I hope you are doing well :)

    I used the below code to try and remove the left header on one of my pages, but I think I may have done something wrong, as it only removed the navigation menu and left a white space behind on the left, where the menu used to be.

    #header-space [data-format="left-header"], #header-outer[data-format="left-header"] {         display: none !important;     }

    I tried the code without the data-format part, but it was the same result. I also tried the code on the support article about creating a landing page and removing the header / footer.

    If it helps, I don't have the transparent header option activated, either on the page itself or in the main theme settings.


  •   Benny replied privately
  •  4
    Benny replied

    Hi there!

    I seem to have fixed it using the below code that I found on another ticket. But, it looks like there is an issue with the shape dividers. They get cut off on the sides of the page, instead of spanning the full width of the page. Do you by any chance have a piece of code that could fix it?

    Thank you so much!! :)

    @media only screen and (min-width: 1001px) {
        body[data-header-format="left-header"].page-id-685 #ajax-content-wrap {
            margin-left: 0px !important;
        }
    }

    body[data-header-format="left-header"] .full-width-section .row-bg-wrap {
       margin-left: -50vw;
        left: 50%;
        width: 100vw;
    }

  •  4
    Benny replied

    Hi again!

    I am so sorry for all of the updates, I should have spent more time searching past tickets before I created this one. I was able to fix the issue with the shape divider by reusing one of the previous pieces of code below, and adding the nectar-shape-divider class to it. I added the full code below with comments in case you want to update the landing page article with it or if someone else comes across this ticket.

    - -

    The following CSS code will allow you to achieve a 'landing page' look for your page (removing the header and footer), when you have the left header layout option activated. Add the code to the Custom CSS Code box under CSS/Script Related under General Settings in the Theme Dashboard / Settings (Salient). The text between /* and */ are comments and may be retained, as they do not affect your code and are not read when the code is processed by the site.

    /* Removes the navigation menu items. */

    #header-space [data-format="left-header"], #header-outer[data-format="left-header"] {
            display: none !important;
        }

    /* Fixes the spacing issue on each side of the page, when navigation is removed. Replace page id number with the page id number for your page, found in the URL when editing page from the backend. */

    @media only screen and (min-width: 1001px) {
        body[data-header-format="left-header"].page-id-685 #ajax-content-wrap {
            margin-left: 0px !important;
        }
    }

    body[data-header-format="left-header"] .full-width-section .row-bg-wrap {
       margin-left: -50vw;
        left: 50%;
        width: 100vw;
    }

    /* Only required if you have one or more nectar sliders present on the page. */

    .nectar-slider-wrap[data-fullscreen="true"] .swiper-container {
        width: 100vw!important;
    }

    /* Only required if you have one or more shape dividers activated on the page. */

    body[data-header-format="left-header"] .nectar-shape-divider {
        margin-left: -50vw;
        left: 50%;
        width: 100vw;
    }

    /* Completely removes the page footer. */

    #footer-outer {

    display: none !important;

    }