[jbedel]

Hello,

If you look at my site the main window slide is way to high on the page with no margin, can you please showme how to control the top padding for that window?
thank you!

[Theme Horse Support Team]

Hi Ravy,

Please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS Code.

@media (max-width: 767px) {
    .navbar-brand .custom-logo {
        display: none;
    }
    .navbar-ad-section {
        margin-top: 0;
    }
    .navigation-bar-top:before {
        content: "";
        background-image: url('https://i2.wp.com/watchmes.com/wp-content/uploads/2019/06/logo-cover.png?fit=100%2C100&ssl=1');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 45px;
        width: 45px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        z-index: 10;
    }
}

Thank you!

[Theme Horse Support Team]

Hi,

Please paste below custom CSS code in Appearance > Customize > Additional CSS to have the burger menu on desktop as well.

@media (min-width: 992px) {
    .navbar-expand-lg {
        -webkit-box-orient: inherit;
        -webkit-box-direction: inherit;
        -ms-flex-flow: inherit;
        flex-flow: inherit;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .navbar-expand-lg>.container, 
    .navbar-expand-lg>.container-fluid {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .navbar-expand-lg .navbar-toggler {
        display: block;
    }
    .navbar-expand-lg .navbar-collapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overflow: hidden;
        height: 0;
        display: block !important;
    }
    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
        height: auto;
    }
    .navbar .main-navigation {
        border-top: 1px solid #eeeeee;
        margin-right: 0;
        display: block !important;
    }
    .main-navigation li {
        display: block;
    }
    .main-navigation li + li {
        border-top: 1px solid #eeeeee;
    }
    .main-navigation a,
    .main-navigation .dropdown-menu a, 
    .main-navigation li ul a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .main-navigation .search-toggle {
        display: none !important;
    }
    .main-navigation li .dropdown-menu a,
    .main-navigation li ul li a{
        padding-left: 30px;
    }
    .main-navigation li ul li ul li a{
        padding-left: 60px;
    }
    .main-navigation .dropdown-menu, 
    .main-navigation li ul {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        display: block;
        border-width: 1px 0 0;
    }
    .main-navigation ul li ul li ul, 
    .headernav .main-navigation ul li ul li ul {
        left: auto;
    }
    .main-navigation ul li ul, 
    .main-navigation ul ul li ul, 
    .main-navigation ul ul ul li ul, 
    .main-navigation ul ul ul ul li ul, 
    .main-navigation ul ul ul ul ul li ul {
        display: block;
    }
    .main-navigation ul li ul, 
    .main-navigation ul li:hover ul ul, 
    .main-navigation ul ul li:hover ul ul, 
    .main-navigation ul ul ul li:hover ul ul, 
    .main-navigation ul ul ul ul li:hover ul ul {
        display: block;
    }
    .main-navigation .dropdown-menu,
    .main-navigation li:hover .dropdown-menu {
        display: none;
    }
    .main-navigation .show > .dropdown-menu,
    .main-navigation .show:hover .dropdown-menu {
        display: block
    }
    .main-navigation .dropdown-menu a:hover, 
    .main-navigation .dropdown-menu a.current-menu-item, 
    .main-navigation li ul li:hover > a, 
    .main-navigation li ul .current-menu-item > a,
    .main-navigation li ul li.current-menu-ancestor > a {
        background-color: transparent;
    }
}

Thank you!

[Theme Horse Support Team]

Hi Jude,

Regarding to your site please us below custom CSS code to reduce the header space. You can find the custom css option via Appearance > Customize > Design Options > Custom CSS

.hgroup-wrap {
    padding-top: 0;
    padding-bottom: 0;
}
#site-logo {
    margin-top: 0 !important;
}

Thank you!

[Theme Horse Support Team]

Hi Jude,

Regarding to your site please us below custom CSS code to reduce the header space. You can find the custom css option via Appearance > Customize > Design Options > Custom CSS

.hgroup-wrap {
    padding-top: 0;
    padding-bottom: 0;
}
#site-logo {
    margin-top: 0 !important;
}

Thank you!

[Theme Horse Support Team]

Hello Staniole,

Please add the below custom CSS code in Appearance > Customize > Additional CSS to set the width to 1240px.

@media (min-width: 1200px) {
	.container,
	.post-template-default .site-content .container,
	.page-template-default:not(.woocommerce) .site-content .container{
		max-width: 1240px;
	}
	.post-boxed.inlined .post-img-wrap {
		height: 80px;
		width: 80px;
	}
	.newscard-widget-horizontal-vertical-posts .post-boxed.main-post .post-img-wrap {
		height: 234px;
	}
	.col-xxl-4 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	.entry-content p {
		margin-bottom: 15px;
	}
	.featured-section .post-block .entry-header,
	.featured-section .two-column-featured-section .post-block .entry-header {
		padding: 10px 10px 0;
	}
	.navbar-head.navbar-bg-set {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.main-navigation a,
	.search-toggle {
		padding: 15px;
	}
	.main-navigation > ul > li.menu-item-has-children > a,
	.main-navigation > ul > li.page_item_has_children > a {
		padding-right: 32px;
	}
	.main-navigation > ul > li.menu-item-has-children > a:after,
	.main-navigation > ul > li.page_item_has_children > a:after {
		right: 15px;
	}
}

Thank you!

[Theme Horse Support Team]

Hi @eric1

To pop on the post title instead of seeing all text when mouse over just use below custom CSS code:

.has-post-thumbnail:not(.format-quote) .entry-wrap .entry-main {
	top: inherit;
	padding: 30px 15px 15px;
	background: transparent;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.8));
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.8));
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.8));
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.4));
}
.has-post-thumbnail:not(.format-quote) .entry-wrap .entry-main p {
	display: none;
}
.has-post-thumbnail .entry-wrap .entry-main .entry-title {
	margin-bottom: 0;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	color: #fff;
}

Thank you!

[Theme Horse Support Team]

Hi,

Please add below custom CSS code to reduce white spaces in header section via Customizing > Design Options > Custom CSS

.hgroup-wrap {
    padding-top: 0;
    padding-bottom: 0;
}
.hgroup-right, #site-logo {
    margin-top: 0;
}

Thank you for using our theme.

[Theme Horse Support Team]

Hi,

Go to Appearance > Customize > Additional CSS and paste below custom CSS code to make the desktop view look like the mobile view.

.has-post-thumbnail:not(.format-quote) .entry-wrap .entry-main {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
	top: inherit;
	padding: 30px 15px 15px;
	background: transparent;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.8));
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.8));
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.8));
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.4));
}
.has-post-thumbnail:not(.format-quote) .entry-wrap .entry-main p {
	display: none;
}
.has-post-thumbnail .entry-wrap .entry-main .entry-title {
	margin-bottom: 0;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	color: #fff;
}

Thank you for using our theme.

[pentalogia]

It’s the best setting for my situation if we no were find the way that removed only posting subject.

.breadcrumb {
    max-width: 220px;
  //  display: inline-block; // ---except for mobile view
    padding: 0;
    margin-top: -3px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[pentalogia]

Thank you for your suggestion.
That code is helpful.
But Plz allow one more question about this.

I have any suggestion from mtekk.com.

.breadcrumbs span[property="name"] {
    max-width: 320px;
    display: inline-block;
    padding: 0;
    margin-top: -3px;
    vertical-align: middle;
    max-width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

It may be control in ‘posting subject’.
Because span[property=”name”] is a tag for the subject of each posting on Breadcrumb NavXT.
But that code(mtekk’s) has no effect anything in this theme.
So I changed as follows:

.breadcrumb {
    max-width: 320px;
    display: inline-block;
    padding: 0;
    margin-top: -3px;
    vertical-align: middle;
    max-width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

I could get the effect that is same of your suggestion.
Can I however get an effect for span[property=”name”] ?
Finally, I want to remove ‘posting subject’ in breadcrumb menu-line by that code.

[Pierre]

#site-title a {
	min-width: 200px; 
	font-family: 'Open Sans', sans, arial;
	color: #108080 !important;
	font-size: 1.05em;
	color: #108080; 
	text-shadow: 1px 1px #b3b3b3;
	text-transform:uppercase;
	text-align: left;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	line-height: 28px;
}
#site-title:hover a {
	color: #b3b3b3 !important;
}

[Pierre]

For title:

#site-title a {
	min-width: 200px; 
	font-family: 'Open Sans', sans, arial;
	color: #108080 !important;
	font-size: 1.05em;
	color: #108080; 
	text-shadow: 1px 1px #b3b3b3;
	text-transform:uppercase;
	text-align: left;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 0px;
	line-height: 28px;
}
#site-title:hover a {
	color: #b3b3b3 !important;
}

Page:

.page-title {
	font-size: 1.6em;
	color: #08458c !important;
}

Posts:

.entry-title {
	font-size: 1.6em;
	color: #08458c !important;
}

You ca use Debugger for to find the css in the site.

[gordon]

I have just upgraded to version 4 and the menu is not working on mobile devices, however it is ok on tablets and desktop. I am not using a child theme, however I have a small amount of custom css as detailed below. The website is here http://www.malonecleaningservices.co.uk, Do I need a new style/css and functions.php file as kanashi?

.container {
margin: 0 auto;
max-width: 10388px;
}

#access ul { margin:0px 0px 0px 33px; }

.entry-header { display: none;}
.entry-title { display: none;}

#main { padding: 0px 0 10px 0px; }

.entry-content {margin-top:0px;}

#site-generator { display : none; }

.hgroup-wrap {display:none;}

header img {margin:20px 0px 0px 0px; }

[chrisdbais]

Thanks for your help.

Are you also able to tell me why the below CSS is not working

#header-left
{
width: 100%;
}

#site-logo
{
clear: both;
display: block;
float: none;
margin: 0 auto;
text-align: center;
}

#hgroup-wrap img
{
display: inline-block;
}

#header .top-bg
{ display: none; }

#header #mainmenu, #header #mainmenu ul li { border: none; }

#header-content {
margin: 0;
padding: 0;
}

I would like to centre the header and footer and remove the lines around the slider and also around the menu section. This is the look i am going for. https://www.fleamail.com.au/