Reduce margin/padding for header slider in mobile mode for sydney pro theme


#1

I am preparing to rebuild my calculus site on Bluehost because
my present hosting company has had a lot of issues.

At one time my site was appearing well in mobile mode
(http://joshaudavisteachescalculus.org)
During the last 8 months, it has not been able to fix the Wordpress
disappearing image problems.

I am working on a practice site before I rebuild my site with a .com ending
The practice site is http://mystudentlink.net/practicewebsite2/

The only issue I am having now is that there is a lot of space above the
header and menu in mobile mode.

I searched the forum and tried some suggestions. They did not
work.

For example, I implemented the below CSS.

    @media only screen and (max-width: 800px){
        .header-slider {
           margin-top: 0px;
           padding-top: 0px;
           padding-bottom: 0px;
        }
    }

As you will see, it does not work.

Please provide me with the correct CSS fix please!

Thank you,

Joshua Davis


#2

I am humbly asking for help with this issue.

I have tried several css code suggestions I found on the forum, unfortunately they did not work.

I again am humbly asking anyone out there to show me how to solve this problem.

I will and do appreciate any assistance.

Thank you,

Joshua Davis


#3

Hello there,

If I got it correctly, you’d try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .btn-menu {
      line-height: 26px;
    }

Or this one:

    @media only screen and (max-width: 1024px) {
      .site-header,
      .site-header.fixed {
        position: absolute !important;
      }
    }

Regards,
Kharis


#4

Thank you for getting back to me. I will try it and will get back to you.

Please send me a link where I can give you a shout out on the Wordpress support forum.

Thank you,

Joshua Davis


#5

Thank you so much.

The second code snippet worked.

Thank you,

Joshua Davis


#6

Here is the site.

https://joshuadavisteachescalculus.com

I went ahead and started the rebuilding process.

When I finished, I will change the link on my main site to link to this new calculus video site.

Thank you so much.

Joshua Davis


#7

You’re welcome Joshua!

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


#8

Thank you so much for your help.

You are not only helping me know the Sydney CSS coding structure better,
but you also helping me learn how to master CSS by the assistance that you give me.

I am grateful and thankful for your help.

You are a significant part of helping me move my tutoring business forward.

There are truly no words that can thoroughly describe my gratitude to you.

Thank you for giving me your valuable time, attention and assistance.

I have to let you know that as a retired military officer, I learned how important
it is to let the people who are supporting you know how you appreciate them and value them. My life and my career depended on that.

Again, I truly thank you.

Joshua Davis


#9

That sounds too much Joshua! But thank you for your kind words.

Have a nice day!

Regards,
Kharis


#10

I took the first CSS code snippet you presented to me
and combined it into the second code snippet to
further modify and customize the mobile menu.
After reviewing the w3schools tutorials, I learned
that I can use the CSS “float” to move the menu to
the right.

I hope that this modified code snippet that I am
showing here will help someone else who may
be experiencing the same problem I faced.

You helped me become more focused and encouraged
me to spend more time at the w3schools to hone and
improve my CSS knowledge.

Again, I thank you.

I again hope that the modified code snippet below will help
someone else.

Joshua Davis

.btn-menu {		 
		 float: right;  /* align the menu to the right*
      line-height: 0px;  /* I modified this line*/
		 padding-top: 0px !important;
padding-bottom: 0px !important; 
		 margin-top: 0px !important;
		 
 margin-bottom: 0px !important;
		     }			
}