Docs

[JW.Racing34]

Hi,

I’m a newbie and I’m trying to create my first website. I’ve designed the site so when it’s viewed on a desktop, it looks like the mobile version. So far I’ve got the site exactly how I want it for when viewing it on a Desktop or mobile devices however when I view the site on my laptop (No matter what browser, i.e Firefox, Chrome, Safari) the layout of the NavBar is completely messed up.

This would probably be a CCS conflict issue.

Basically I’m using Superfly menu and wanted the NavBar to be placed on the left hand side of the site with a logo. When viewing the site from a mobile, I used the below CCS for my site to make the NavBar and logo disappear leaving the Superfly Menu.

@media only screen and (max-width: 979px) {
.x-brand {
display: none;
}
}
@media (min-width:0px) and (max-width: 1296px) {
.x-navbar, .x-navbar-wrap, .x-navbar-fixed-top-active .x-navbar-wrap {
height: auto !important;
}
.x-navbar-inner{
max-height:100%!important;
}
.x-navbar {
position: relative !important;
}

.x-btn-navbar {
display:none !important;
float:right;
}

.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile.collapsing {
display:block;
}

.x-nav-wrap.desktop .x-nav {
display:none;
}

.x-nav-wrap.mobile, .x-nav-wrap.mobile .x-nav {
display: block !important;
}
}

.x-topbar {
display:none;
}

.archive article header.entry-header {
display: none;
}
body .x-brand.text {
display: none;
}.x-integrity .post .entry-footer {
display: absolute;
top: -99999em;
visibility: hidden;
}

Here is the URL to my site: http://www.jordanweaving34.com

I’ve attached some screen shots.

Screen Shot 1 and 2 features the site exactly how I want it when viewing it from a Desktop or mobile however if you look at screen shot 3 and 4, this is how the site is displayed when viewing it from a laptop. The navbar and logo are completely in the wrong position.

Please could you help.

Best wishes,

Reece

[Christian]

Hey there,

Regretfully we cannot support any modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[Author]

Posts