[samunder123Participant]

Hi 🙂

Love the theme. Is it possible to remove the breadcrumbs and the area the breadcrumbs is in when on a mobile?

Thanks!

[SenthilMember]

Hi There,

Thanks for writing in!

Please add the following CSS in your Appearance > Customize > Custom > CSS and it will hide breadcrumb menu in mobile devices.

@media (max-width:979px) {
	.x-breadcrumb-wrap {
		display: none !important;
	}

}

Hope it helps, thanks!

[samunder123Participant]

Worked great, thanks!

[ChristianModerator]

You’re welcome. Glad we could help.

[musicforminorsParticipant]

Hi! This code didn’t work for me. Ideally, I wanted this to be in effect for max-width: 479px (it’s the same break at which I have my topbar disappearing, see below). I had been given some code to keep the breadcrumb from widowing on desktop (it was smushed all the way to the right and the post title was breaking to a second line needlessly), but that code doesn’t work too well either. So, really my ideal situation is this: breadcrumbs that run the full length of ONE line (right-justified) on desktop and tablet landscape, but then when you go to tablet portrait view (and the topbar disappears), so does the breadcrumb.

Does this make any sense? 😉

Site I’m working on: mfmdev.org

Current Custom CSS:

h1,.h1 {
font-size: 250%;
}

h2,.h2 {
font-size: 175%;
}

h3,h4.h5{
font-size:100%;
}

.x-navbar .mobile .x-nav li>a {
border: none;
}

.x-btn-navbar {
box-shadow:none;
border-radius: 0;
}

@media (max-width:1200px) {
.menu-item-1172 {
background-color: #F79C57;
}
}

@media (min-width:480px) {
.menu-item-1213 {
display: none!important;
}
}

@media (min-width:480px) {
.menu-item-1214 {
display: none!important;
}
}

@media (min-width:480px) {
.menu-item-1215 {
display: none!important;
}
}

@media (max-width: 479px) {
.x-topbar {
display: none;
}
}

a.topbar-link:link {color: #FFFFFF}
a.topbar-link:visited {color: #FFFFFF}
a.topbar-link:hover {color: #F79C57}

.x-topbar .x-social-global {
display: none;
}

.x-topbar {
border-bottom: none;
}

.x-topbar-inner p {
font-size: 16px;
color: white
}

.menu-item-1172 a {
background-color: #F79C57;
border-radius: 0px;
}

.menu-item-1172 a span {
color: white;
}

.menu-item-1172 a:hover {
background-color: #8BC53F !important;
}

.menu-item-1172 a:hover span {
color: white;
box-shadow: none !important;
}

.x-header-landmark {
max-height: 50px;
margin-bottom: 5px;
border-bottom: none;
}

.home header.x-header-landmark {
display: none;
}

.page .x-landmark {
display: none;
}

.blog .x-landmark {
display: none;
}

.h-landmark, .entry-title.h-landmark {
display: none;
}

.x-container.max.width.offset {
margin-top: 0;
}

.entry-title {
font-size: 200%;
}

.entry-featured {
border:0;
}

.entry-thumb:before {
display: none;
}

.entry-thumb {
background-color: transparent;
}
a.entry-thumb:hover img {
opacity: 1;
}

.x-section {
padding: 0px 0;
}

/* breadcrumb */
@media (max-width:979px) {
.x-breadcrumb-wrap {
display: none !important;
}
}

/* footer */

.x-subscribe-form input[type=”submit”] {
font-family: “Lato”,sans-serif;
text-shadow: none !important;
background-color: transparent !important;
border: 3px solid !important;
}

.x-subscribe-form input[type=”text”], .x-subscribe-form input[type=”email”] {
border: none !important;
}

@media (min-width:480px) {
footer .x-social-global {
float: right;
width: 200px;
}

body .x-colophon.bottom .x-colophon-content {
float:left;
}
body .x-colophon.bottom .x-nav li {
float:left;
}
}
.x-colophon.bottom .x-social-global a {
font-size: 40px;
}

.x-colophon.bottom .x-nav li a:hover {
color: #F79C57 !important;
opacity: 1;
}

.x-colophon-content a:hover{
color: #F79C57;
}

/* widget slider, center logos */
#text-2 .x-flexslider {
margin: 0 auto;
}

.widget_text .h-widget:before {
display: none;
}

[NicoModerator]

Hi There,

Would you mind opening a new thread and share us your URL so we could check your setup further.

Thank you so much.

[Author]

Posts