How do I make my header fixed/sticky on Wordpress theme? - wordpress

I am helping out producing a website for a friend but the header isn't fixed at the top, it overlaps the slideshow at the moment. However if I collapse the screen to 'ipad' width the header is fixed at the top.
This is the site at the moment: http://www.testing-30-10-1993.com/
I don't want to risk editing code in case it messes up. I purchased this theme from Template Monster. I just really want the header/nav to be fixed like if you drag the website width to ipad size.
Can anyone help? Alternatively does anyone know anyone/website where I can pay someone to do this? Cheers & appreciate all help. I would add in code but I'm not even sure what section of the code I should copy.
x

If you are not afraid to edit a line of code, go to line 844 of the main-style.css file in the folder to find this declaration:
.page-template-page-home-php .header > .container > div {
position: absolute;
}
Change it to this:
.page-template-page-home-php .header > .container > div {
position: relative;
}
Otherwise, if you'd prefer not to mess with the theme's files, install a plugin for adding custom CSS and paste in the following code:
#media (min-width: 1200px) {
body.page-template-page-home-php .header > .container > div {
position: relative;
}
}
Good luck!

Related

CSS Media Query not Working (Meta View Port Added)

I have my website looking just how I want it on a desktop. I have come to adding a media query today thinking it would be as straight forward as its been in the past for me, but it doesn't want to work for me this time. I have added the meta view port (automatically added with Emmet shortcut '!') but no dice.
I just want to switch the flex direction to column and the divs to 100vw. I added the yellow colour here as a visual reference for myself.
#media only screen and (max-width: 720px) {
text__main {
min-width: 100vw;
background-color: yellow;
}
container {
display: flex;
flex-direction: column;
}
menu {
display: none;
}
}
Any guidance would be massively appreciated. The website is currently an eyesore and reflects badly on the content.
Many thanks.
Seems like you wrote your CSS selectors incorrectly. Instead of text__main try .text__main and so on with other selectors (menu could be an HTML tag, so maybe it should stay as it is now).

Word Press & Elementor: Customize Spacer size for different screen Width

I was wondering if anyone has attempted to create responsive spacers and come across the following issue.
I am trying to customize a specific spacer in my home page such that below a certain screen size (i.e width), the size of that particular spacer will be zero pixels. I am using word press and Elementor pro.
What i have tried to do is select the spacer, right click then edit spacer --> advanced --> custom css ... and i have inserted the following code however nothing seems to happen:
/* Remove spacer block */
#media screen and (max-width:740px) {
.spacer-block {
display: none !important;
}
}
I would really appreciate some help with this.
Many thanks,
MJ
I would recommend you to use margins instead of the spacer. For example:
#media screen and (min-width:741px) {
.my-element {
margin-top: 50px;
}
}
#media screen and (max-width:740px) {
.my-element {
margin-top: 0px;
}
}

Weird text (CSS) on wordpress checkout page

can someone please help me about this Wordpress CSS problem. On the checkout page the payment methods float right and for some reason the method description text is 'vertical', instead of having sentences in the full row, only 2 or 3 letters appear in each row (image included).
When I change the window size (and on mobile) everything looks okay.
Can anyone help me with some css code which would fix this? I don't know how to edit stuff that isn't in styles.css.
The problem
when i resize the window / mobile screen
The link:
https://zelenakuca.com/checkout/
Thank you!
Paste media code with style before line code
</style><noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head> in index page or file.
#media (min-width: 1025px)
{
#order_review {
width: 100%;
}
}
Please try these CSS:
#media (min-width: 1025px){
#order_review {
float: none;
width: 100%;
}
}

Why does this pricing field li stack on mobile?

I think I am going insane. I cannot figure out why this pricing field all of a sudden stacks below 641 px. Can anyone help me out?
I think I need a new set of eyes to look at the code!
http://forfattarskola.staging.wpengine.com/bildkort/bestall-bildkort/
Good
Bad
Without the code to look at and just the page source it looks like you need to change this css class to use inline-block and not block
#media only screen and (max-width: 641px) .gform_wrapper .ginput_container span {
display: inline-block;
}
try:
#gform_fields_4 li {
min-width: 200px;
}
#gform_fields_4 li * {
display: inline-block;
}
i tested this on your page through chrome debug, and seems to work. add this CSS to page and voilá!

media queries only work at top

#media screen and (max-width: 1336px) {
.rectangle-box {
visibility: visible;
}
#p-cactions {
top: 461px;
left: 410px;
}
}
#media screen and (max-width: 1040px) {
.rectangle-box {
visibility: hidden !important;
}
#p-cactions {
top: 461px !important;
left: 1110px !important;
}
}
I put these on the top of a css files code and they work but when i put them on the bottom of the code in the css file they dont work at all. Why is my css working in reverse? im using chrome. the css file is main.css for monobook skin in mediawiki. I guess its good i got it to work im just curious.
You must not edit main.css or hack other code code directly! The results are not predictable.
Use the gadgets extension and manage your JS/CSS directly on your wiki. There are gadget options to make them top-loaded if needed.
If you want to do more complex things server-side, read the developing with ResourceLoader doc page. It also has advice on media queries and what to top-load.
I have already figured out a way to make this all work in main.css in a very predictable way. thanks but i have already solved the problem. I changed #media screen to #media. i placed this at the bottom of the css file and it works.

Resources