Trying to reduce padding on mobile menu, x theme, renew stack. Media query doesn't appear to be working

[insecureabnormality]

Hi folks,

I am trying to remove the margin-top of my logo on mobile and remove some of the padding on the menu items, and just generally make the navbar take up a bit less real estate.

It currently looks like this:

But I’m trying to get it to look a bit more like this:

I’ve used developer tools to try and identify the proper selectors and have constructed the following media query which I added to the css under theme options:

@media (max-width: 480px) {

.x-navbar .mobile .x-nav li > a {
	margin: 0 0 11px;
	border: 1px solid;
	padding: 0.25em 0.95em;
	color: #fff;
	background-color: transparent;
}

.x-brand {
	margin-top: 0px;
	font-family: "Montserrat",sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 5em;
	text-transform: uppercase;
	color: #434f5b;
}

.x-navbar-inner {
	min-height: 90px;
}

}

However the changes are not enacting when I save the css, any ideas why this is happening? I’m under pressure to try and get this sorted.

Thanks in advance,

Stephen

[ruenel]

Hello Stephen,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ruenel]

Hey Stephen,

The given credentials do not work for us. The password seems incorrect.

Meanwhile, you have inserted a broken CSS:

//Attempt to fix background-image not being set.page-template-template-blank-4-php .x-main,.page-template-template-blank-5-php .x-main,.page-template-template-blank-6-php .x-main,.page-template-template-blank-8-php .x-main{
    background-color:transparent !important;
}
//Resise mobile menu assets@media(max-width:480px){
    .x-navbar .mobile .x-nav li > a{
        margin:0 0 11px;
        border:1px solid;
        padding:0.25em 0.95em;
        color:#fff;
        background-color:transparent;
    }
    .x-brand{
        margin-top:0px;
        font-family:"Montserrat",sans-serif;
        font-size:18px;
        font-style:normal;
        font-weight:700;
        letter-spacing:5em;
        text-transform:uppercase;
        color:#434f5b;
    }
    .x-navbar-inner{
        min-height:90px;
    }
}

If you are going to use Comments in CSS, you should be coding it like this:

/* Attempt to fix background-image not being set */

For your reference, kindly check this out:

• https://www.w3schools.com/css/css_comments.asp

[insecureabnormality]

Sorry my bad I have updated the secure note. My god how did I make such a stupid error sincere apologies over that. Any ideas on why the background image for the pages isn’t working? I have edited the css anyway and updated the secure note with the actual credentials there now. Thanks

[prakash_s]

Hello Stephen,

I checked your site it seems that your custom CSS is rendering on the frontend but you have set the background colour on each section which is why it seems that it is not working for you.

In case if I miss anything please let me know with a marking screenshot and exact page URL.

Thanks

[insecureabnormality]

Hey no this does not appear to be the issue.

If you take for example the History page https://theunreal.city/history/

The background is not being set in any section. In page settings I have the following:

The background image should be this https://theunreal.city/wp-content/uploads/2021/03/BG-Homepage-Lg-scaled.jpg but nothing is displaying.

I also note in the docs it says there should be a button here to select the page background imge, but there is just a text field…

EDIT: there was a css rule set in global css which I think you might be referring to, this was a fix I read in another thread for a different stack. I have removed this rule now but the problem is still occurring…

[ruenel]

Hello Stephen,

I am suspecting that this is in conflict with the latest release of the theme. I’ve submitted this to our issue tracker so the developers will be made aware of it.

To get around this, please go to X > Theme Options > CSS and insert this code:

.site, .x-site {
    background-color: transparent;
}

Kindly let us know how it goes.

[insecureabnormality]

This solved the problem thanks!

Is there a way of having the image move when scrolling. The image is purposely quite long but now it seems to be sort of cropped and locked in the one position as you scroll if that makes sense…

[tristup]

Hi Stephen,

Glad that the problem is resolved now. If you are trying to scroll the background image, regretfully, that is not possible as you have set that through the page settings. I would suggest you to set the image as background image of the section in the page, so you can have those options. I would also request you to update the theme to latest version to get the updated options.

Thanks

[insecureabnormality]

Okay thanks I will do that. Thanks for all the help.

[prakash_s]

Hello Stephen,

Glad that we were able to help you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Thanks