Reviewed the previous topics about going into global css to remove prior mwlaw. text from showing on the left hand side. Unfortunately, after reviewing the css, could not find code that matched to remove.
Can you please look at the site and let me know how I can replace the mwlaw. text with the actual logo for the business?
Hello Kimberly,
Thanks for writing in! The global CSS can be found in X > Theme Options > Custom CSS:
/*
// Global Styling
// --------------
*/
.site {
padding-top: 1.75em;
}
.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: 640px;
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: 1075px;
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: 100%;
}
/*
// (min-width: 768px)
// ------------------
*/
@media (min-width: 768px) {
.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 - 3em);
width: calc(100vw + 3em);
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(http://coastalconstructiongroup.net/wp-content/uploads/2020/08/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 */
}
}
Hope this helps.
Thank you, I see my error I was looking for that specific url as the previous post, but it changed the url it’s a different website.
So I replaced that url with an image I’d like to actually use, the logo and unfortunately no success. It doesn’t show regardless of what size I make it. Can you advise why my logo is not showing here and also why the logo that I put in the header section of my theme option is not showing as well. Think that possibly these two issues are related.
Thank you!
Hi Kimberly,
Your code did not work because you have inserted it incorrectly.
Kindly have it updated and use this:
background-image: url(http://coastalconstructiongroup.net/wp-content/uploads/2020/02/Coastal-logo-e1598653418126.jpg);
width: 107px;
height: 107px;
z-index: 9999;
There should be NO spaces between url and the (http://coastalconstructiongroup.net/wp-content/uploads/2020/02/Coastal-logo-e1598653418126.jpg) in the code. Change the width and height as well according to the dimensions of your logo.
We would love to know if this has worked for you. Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.