Padding issue with Sydney Pages

Home Forums Sydney Padding issue with Sydney Pages

Topic Resolution: Resolved

This topic contains 10 replies, has 2 voices, and was last updated by  Kharis Sulistiyono 4 weeks, 1 day ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1063386

    McFluppi
    Participant

    Hi AThemes-team!

    First of all: The Sydney theme is amazing!

    However, I do have an issue with the padding on all pages. I am using the following CSS code currently, where the part “position: relative !important;” seems to be causing the issue.

    @media only screen and (min-width:992px){
      
      .site-header.fixed{
        position: fixed !important;
        position: relative !important;
        padding: 0px !important;
      }
      } 

    Without the specific part (“relative”) all pages do not have a padding on the right side, which is desired. However, this cuts off the headlines on all pages (except >home<). On the other side, when I insert the part
    position: relative !important;

    the headlines are where they are supposed to be, but all pages have a white padding on the right side (incl. home) and on the bottom of the browser a slider appears to allow scrolling to the right. The latter is not desired and I am looking for a solution that solves both:

    1. No padding on right side (nor o any other side)
    2. Headlines not covered by menu (placed where they are supposed to be)

    I look forward to hearing back from you and appreciate your help!

    Thanks,
    F

    Website

    • This topic was modified 1 month ago by  McFluppi.
    #1063441

    McFluppi
    Participant

    Meanwhile I found out that the issue with the padding may be caused by the menu width. Currently I am using

    #mainnav ul ul a {
        width: 280 !important;
    }

    to allow the menu items to be shown in 1 line only (no wrapping). If I reduce the width to 250 everything looks great, except that some menu items wrap into 2 lines. This is not desired, but I could live with it if we weren’t able to fix this.

    Appreciate your help with this issue.

    Thanks

    #1063445

    Hello there,

    I am sorry to hear you’ve run into trouble.

    Does this issue happened only on mobile device?

    What will happened if you add this CSS code to Appearance > Customize > Additional CSS.

    
    html,
    body {
       overflow-x: hidden;
    }
    

    Regards,
    Kharis

    #1063469

    McFluppi
    Participant

    Hi,
    This issue happened on my computer. I have not checked how it appeared on mobile.

    I did some more research and found a code that solved it. I am not sure why this solved it, but I am good right now.

    This is what I am using now, and it works:

    #mainnav ul ul a {
        width: 260px !important;
    }
    
    #mainnav li {
      margin-right: 50px !important;
      }

    Thank you so much for your response though! I did try your code now, but it adds spacing on the right.

    #1063499

    McFluppi
    Participant

    Hi Kharis,
    While the padding issue is solved, I still have problems with the menu.
    Currently I am using:

    @media only screen and (min-width:992px){
    .site-header.fixed{
       position: relative !important;
       padding: 10px !important;
      }
      }
    

    However, I would like the header menu to be sticky/fixed, so it is visible at all times (even when scrolled down). So I tried changing the CSS code to the following, but then the header overlays content/headlines on all pages, instead of pushing the content down.

    
    
    @media only screen and (min-width:992px){
    .site-header.fixed{
       position: fixed !important;
       padding: 10px !important;
       
      }
      }

    Do you know what I can do to have a fixed header that would not overlay the content?

    • This reply was modified 1 month ago by  McFluppi.
    #1063694

    McFluppi
    Participant

    BTW: When I switch back to the parent theme of Sydney I do not have that issue. Only with the child theme, which I just downloaded from your page and uploaded again, but the issue remains.

    #1064407

    Hello there,

    Please share the extra custom CSS code you applied in the Appearance > Customize > Additional CSS. Ensure the child theme is active.

    Some lines of extra CSS code applied might be the source of the issue.

    Regards,
    Kharis

    #1064562

    McFluppi
    Participant

    Hello Kharis,

    Here is my full CSS code:

    .site-logo {
        max-height: 50px !important;
    }
    
    .site-header {
        background-color: rgba(50,79,158,1) !important;
    }
    
    @media only screen and (min-width:992px){
    .site-header.float-header {
      padding:10px 0;
    }
      
    .header-slider {
        height: 797px !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0; 
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .slides-container .slide-item {
        background-size: 100% 100%;
    }
    
    .text-slider{
      background-color: rgba(0,0,0,0.5);
      padding-top: 25px;
    }
    
    @media only screen and (min-width:1025px){
      .text-slider .maintitle{
      font-size: 40px !important;
      }
    
      .text-slider .subtitle{
      font-size: 25px !important;
      }
    }
    
    div#slideshow p.subtitle {
        font-family: Michroma,sans-serif;
    }
    
    #mainnav ul ul a {
        width: 260px !important;
    }
    
    #mainnav li {
      margin-right: 20px !important;
      }
    
    .slide-inner {
        position: absolute;
        top: 45%;
        text-align: center;
    }
    
    .wpcf7 input.wpcf7-text { width: 100%; height: 30px;}
    .wpcf7 textarea.wpcf7-textarea { width: 100%; }
    .wpcf7-form textarea { height: 150px; }
    
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 textarea
    {
        color: #8f8f8f;
    }
    
    .footer-widgets {
        padding: 0;
    }
    
    .site-footer{
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0 !important;
    }
    
    body {
        line-height: 1.4 !important;
    }
    
    .breadcrumbs {
        padding-left: 100px !important;
        margin-left: 100px !important;
      }
    

    Thank you!

    #1065138

    Hello there,

    Please try adding this extra CSS code:

    
    @media only screen and (min-width:992px) {
    
      body:not(.home) .header-image {
        display: block;
        height: 0;
        margin-top: 140px;
      }
      
    }
    

    Let me know how it goes.

    Regards,
    Kharis

    #1065458

    McFluppi
    Participant

    Kharis, you are genius! 🙂
    This solved the issue. Thank you so much.
    Have a great weekend.

    #1065501

    You’re welcome!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

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

You must be logged in to reply to this topic.