Can’t figure out why uber menu is not full width.
CSS
/*
// Global Styling
// --------------
*/
.site {
padding-top: 0.5em;
}
.blog .entry-wrap {
padding: 0px !important;
box-shadow: none !important;
}
.blog .entry-header {
display: flex;
flex-direction: column-reverse;
}
.blog .p-meta span,
.blog .p-meta span i,
.blog .p-meta span:after {
display: none;
}
.blog .p-meta span:nth-child(2) {
display:inline-block;
margin: 15px 0;
font-size: 1.3em !important;
line-height: 1.4;
color: #b3b3b3;
}
.blog .entry-title a {
font-size: 0.9em !important;
line-height: 1.5;
color: #191919;
}
.blog .h-landmark {
padding: 6vw 0em 2vw 0em;
font-size: calc(2em + 1.8vw);
letter-spacing: 0em;
text-align: left;
}
.blog .h-landmark span:before,
.blog .h-landmark span:after {
display:none;
}
.blog .p-landmark-sub {
max-width: 800px;
margin: 0em;
padding: 0em 0em 3em 0em;
font-family: inherit;
font-size: 1em;
font-weight: 400;
letter-spacing: 0em;
line-height: 2.4;
text-align: left;
}
.post .entry-featured {
display: none;
}
.post .entry-wrap {
border-radius: 4px;
}
.x-navbar,
.x-topbar {
border-bottom: 0px;
box-shadow: none;
}
.x-navbar .x-container,
.x-topbar .x-container {
position: relative;
width: 100%;
max-width: none;
margin-left: 0;
padding: 0 1em;
}
.masthead-inline .desktop .x-nav {
float: left;
}
.x-btn-navbar.collapsed {
color: #b9965c;
}
.x-navbar .mobile .x-nav {
padding: 0 1em;
}
.x-brand {
display: none;
}
.x-navbar .mobile .x-nav li > a:hover,
.x-navbar .mobile .x-nav .x-active > a,
.x-navbar .mobile .x-nav .current-menu-item > a {
color: #b9965c;
}
.x-topbar .x-container .p-info {
clear: both;
width: 100%;
font-size: 14px;
line-height: 1.6;
background-color: transparent;
}
.x-topbar .x-container .p-info span {
padding-bottom: 1em;
display: block;
}
.x-colophon.top {
padding-top: 0px;
padding-bottom: 0px;
border: 0px;
box-shadow: none;
}
.x-colophon.top .widget {
text-shadow: none;
}
.x-colophon.top .x-container {
width: 100%;
max-width: none;
}
/*
// (min-width: 768px)
// ------------------
*/
@media (min-width: 797px) {
.p-info span:first-child {
float:left;
}
.p-info span:last-child {
float: right;
}
}
/*
// (max-width: 979px)
// ------------------
*/
@media (max-width: 979px) {
.x-brand {
display: block;
}
.x-navbar {
border-top: 3px solid #b9965c;
}
}
/*
// (min-width: 980px) and (max-width: 1169px)
// ------------------------------------------
*/
@media (min-width: 980px) and (max-width: 1169px) {
.site {
padding-left: 3em;
padding-right: 3em;
}
.x-force-full-width,
.x-colophon {
position: relative !important;
left: calc(0vw - 1em);
width: calc(100vw + 1em);
padding-left: 3em !important;
padding-right: 3em !important;
}
.no-right-padding {
right: calc(0vw - 3em);
}
.site:before,
.site:after {
display: none;
}
}
/*
// (min-width: 1048px)
// -------------------
*/
@media (min-width: 1048px) {
.x-topbar .x-container .p-info {
position: absolute;
top: 50px;
right: 0;
width: 450px;
}
}
/*
// (min-width: 1170px)
// -------------------
// 01. Should match with max width from Theme Options >
// Layout and Design + 115px. Current max-width: 1055px +
// 115px (a space for header and footer to bleed out) = 1170px.
// 02. 107px value comes from final output width of logo on site
// (e.g. original is 214px but halved for retina support).
*/
@media (min-width: 1170px) { /* 01 */
.site {
padding-left: calc((50vw - (1170px / 2)) + 1em);
padding-right: 3em;
}
.x-force-full-width,
.x-colophon {
position: relative !important;
left: calc(0vw - ((50vw - (1170px / 2) + 1em)));
width: calc(100vw + 3em);
padding-left: calc((50vw - (1170px / 2)) + 1em) !important;
}
.x-force-full-width.x-padded,
.x-colophon {
padding-left: calc((47.5vw - (1170px / 2)) + 1em) !important;
}
.x-force-full-width.x-rtl {
padding-left: 0 !important;
padding-right: calc((47.5vw - (1170px / 2)) + 1em) !important;
}
.no-right-padding {
right: calc(0vw - 3em);
}
.site:before,
.site:after {
left: calc(((49vw - (1170px / 2)) - (107px + 2vw)) + 1em); /* 02 */
}
.site > .x-container.max {
margin-left: 0px;
}
.blog .site > .x-container.max,
.blog .site > .x-header-landmark {
margin-left: 0px;
padding-left: 1em;
padding-right: 1em;
}
}
/*
// (max-width: 1440px)
// -------------------
// Hide spacer background arrow. Could be done for each section’s CSS
// but it is present on all pages so custom CSS is more useful and reusable.
*/
@media ( max-width: 1440px) {
.head_spacer .x-bg {
display: none;
}
}
/*
// (min-width: 1340px)
// -------------------
// 01. Background logo positioning for very large screens.
// 02. Dimensions should match logo used in Theme Options. Original logo
// is 214x48 but halved for retina display support.
// 03. Logo is rotated and then translate value should be adjusted to suit.
*/
@media (min-width: 1441px) { /* 01 /
.site:before,
.site:after {
content: “”;
display: block;
position: absolute;
background-image: url(https://drlaurelmedmal.com/wp-content/uploads/2021/07/logo.png);
background-repeat: no-repeat;
background-size: cover;
width: 107px; / 02 /
height: 24px; / 02 */
}
.site:before {
top: 0;
transform: rotate(-90deg) translate(-87%, 0); /* 03 */
}
.site:after {
bottom: 6em;
transform: rotate(-90deg) translate(36%, 0); /* 03 */
}
}
