[Resolved] Global Page Titles and Body padding/margin

Home Forums Support Global Page Titles and Body padding/margin

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #986677
    Kathy

    Hello,
    I cannot get my page titles and global margins/padding to make the content show up correctly. As you see in the link, my titles are running into my navigation and the content throughout the site is running into the navigation area. I tried to set this in elementor but it looks horrible. Can you help me out with this? I would like all pages to have some space between the navigation and page content.

    Also, the footer navigation is not showing up on mobile. Any idea why?
    I have had a lot of human error with this website and now I don’t remember a lot of what I did. Totally my fault.

    Any help from you guys would be so much appreciated to get this layout right in desktop and mobile.

    Thank you!

    #986841
    Leo
    Staff
    Customer Support

    Hi there,

    Have you solved this? The title and navigation are separated from what I can see:
    https://www.screencast.com/t/I2MSg10z7lp

    Let me know 🙂

    #986855
    Kathy

    Hello Lee. What I am having to do is set a 45px left padding on each page when I create a page in Elementor in order for the content not to run into the navigation area. This may be an issue on devices.

    The image below shows what is happening when I create an Elementor page and I don’t know what to change to make the column stay outside of the navigation – this is why I have been having to add a 45px left padding to the blocks. Can you help me?

    Screenshot

    #986909
    Leo
    Staff
    Customer Support

    Are you using a plugin called Premium addons pro?

    Can you disable that for now?

    #986938
    Kathy

    Yes I am using that plugin. After playing around with the settings, I think I have this figured out so I won’t have to use 45px left padding. Thanks for you help. I appreciate it very much!

    #987324
    Leo
    Staff
    Customer Support
    #987427
    Kathy

    Sorry but I don’t have this resolved. It looks good on a large screen, however, in smaller screens such a Mac laptop it still is running into the navigation.

    Do you still need me to disable the pro plugin? I need to use the pro plugin due to using the Ken Burns effect on homepage.

    #987429
    Kathy

    I have disabled the Premium addons pro. Here is a screenshot of what it looks like in a laptop. I can really use some help making it align properly. Thanks!

    #987463
    Leo
    Staff
    Customer Support

    I believe your fixed header CSS is casuing the issue:

    /* ------
    Fixed Header
    ------- */
    
    @media (min-width: 769px) {
    	body {
    		margin-left: 275px;
    	}
    
    	.site-header {
    		position: fixed;
    		left: 0;
    		top: 0;
    		width: 330px;border: 1px solid #fff;
      -webkit-box-shadow: 7px 0 3px -4px #f5f4f4;
              box-shadow: 7px 0 3px -4px #f5f4f4;
    		z-index: 300;
    		height: 100%;
    		overflow: auto;
    		overflow-x: hidden;
    		-webkit-backface-visibility: hidden;
    		-webkit-overflow-scrolling: touch;
    		transition: .1s ease;
    	}
    	
    	.admin-bar .site-header {
    		top: 32px;
    	}	
    	.site-header .main-navigation li {
    		float: none;
    	}
    }
    
    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    	height: 100%;
    	-webkit-box-sizing: border-box;
    	        box-sizing: border-box;
    }

    Where did you get that from? Any specific reasons you are using that?

    #987495
    Kathy

    I removed it and the navigation went to the top of page horizontal. So its to make the menu vertical. I put it back. What should I try now?

    #987529
    Kathy

    Okay. I have resolved this issue by changing the margin to 300px

    body {
    		margin-left: 275px;
    	}

    Thank you for your help. I appreciate it.

    #987557
    Leo
    Staff
    Customer Support

    Yup that’s a better solution for sure.

    Our site Sider is using similar layout and this is the CSS its using:
    http://gpsites.co/sider/

    `@media (min-width: 1000px) {
    body {
    padding: 0 50px 50px;
    margin-left: 300px;
    }

    .site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    z-index: 300;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .1s ease;
    }

    .admin-bar .site-header {
    top: 32px;
    }

    .site-header .main-navigation li {
    float: none;
    }
    }

    .inside-header {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    }

    .site-branding,
    .site-logo {
    order: 1;
    }

    .header-widget {
    order: 3;
    }

    .nav-float-right .inside-header .main-navigation {
    order: 2;
    float: none;
    margin-top: 30px;
    margin-bottom: 50px;
    }

    .nav-float-right .header-widget {
    float: none;
    top: auto;
    max-width: 100%;
    }`

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.