[Theme Horse Support Team]

Hi @rob3, @lenylucky

To reduce the white space go to Go to Appearance > Customize > Interface Theme Options > Custom CSS and paste the below CSS code then click on Save button.

#site-logo {
    margin-top: 10px;
}
#access a {
    padding: 25px 0 0;
    height: 45px;
}
#access ul li ul {
    top: 70px;
}
.search-toggle {
    margin-top: 25px;
}
#search-box {
    top: 70px;
}

Thank you!

[Theme Horse Support Team]

Hi Diogomto,

As of your email we have replied your all queries here in this reply.

To align logo vertically center and to change the color of the block and position them a bit up just go to Appearance > Customize > Ambition Theme Options > Custom CSS and paste the below CSS code then click on Save button.

#site-logo {
	margin-top: 22px;
}
.featured-text {
	bottom: 200px;
}
.featured-text .featured-title {
	background-color: #2b3c8e;
}

Change the above hex color code #2b3c8e to change the different color for the block and to disable the link it need code customization you need upgrade to pro version or hire a developer.

Thank you!

[Theme Horse Support Team]

Hi all,

Search function will disable in mobile version by default.
To show it on mobile devices just add below custom css:

@media only screen and (max-width: 767px) {
	.search-toggle {
		display: block;
		margin-top: 22px;
		right: 40px;
	}
	#search-box {
		right: 30px;
		min-width: 203px;
	}
}

Thank you!

Regards,
Theme Horse

[richard5]

Hi
Thank you for this. I wasnt aware of the Excerpt Length setting so have adjusted that and it is just what we need. I have also added the text widget to give me a title.

I am still having issues with the Directors image and copy placement. You can see that the snippet of code you sent has done a perfect job on the female, that is just what we want, but the male text is still limited to half that page and the image is slightly smaller. Can you help with the css for that please. For clarity, i have included below the whole css i have placed in the Custom CSS section.

We also have one more issue. I have created a new post to show in the page slider at the top of this page. I can see where you add the identity of the 4th page to show the image and the short text, but the 3 existing pages are referenced by 2534, 2533 and 2535. I can not see where i pick that up from and so cannot actually add teh 4th page to teh slider sequence. How do we do this?

So we have just 2 matters now, the text and image of the Male directopr and adding the 4th slider page. The site is http://www.ascensyssurveys.co.uk

Thank you

Richard Berry

Here is the current Custom CSS
#interface_recent_work_widget-2 .one-fourth {
width: 30.32%;
}
#interface_recent_work_widget-3 .one-fourth {
width: 47%;
}
#interface_recent_work_widget-4 .one-fourth {
width: 47%;
}

#interface_recent_work_widget-4 .column a {
float: left;
width: 50%;
margin-right: 20px;
}
#content #interface_recent_work_widget-4 .custom-gallery-title, #interface_recent_work_widget-4 p {
display: block;
overflow: auto;
}

#interface_recent_work_widget-4 .one-fourth:first-child {
width: 97%;
}
#interface_recent_work_widget-4 .one-fourth:first-child a {
width: 25%;
}

[Theme Horse Support Team]

Hi Richard,

Apologies for the late reply. We missed your topic.

As of your site widget placement we have provide you a below custom css:

First question: For to show the 3 section top and 2 section below across the page:

#interface_recent_work_widget-2 .one-fourth {
    width: 30.32%;
}
#interface_recent_work_widget-3 .one-fourth {
    width: 47%;
}

Second question: You can not add sidebar easily. It needs code customization.

Third question: For to change the orientation of the directors images and bio you can use testimonial widget as shown in the demo site which will show image to the left and bio to the right, However if you want to use the same recent work widget as in you site then please add below custom css but do not add widget title, content and action button as you did just in above widget.

#interface_recent_work_widget-4 .one-fourth {
    width: 47%;
}
#interface_recent_work_widget-4 .column a {
    float: left;
    width: 50%;
    margin-right: 20px;
}
#content #interface_recent_work_widget-4 .custom-gallery-title,
#interface_recent_work_widget-4 p {
    display: block;
    overflow: auto;
}

If you have any problem then let us know.

Thank you!

[Theme Horse Support Team]

Ho Tamara,

Yes the extra margin comes from the Blog Designer plugin. To reduce the margin go to Appearance > Customize/Theme Options > Design Options Tab > Custom CSS paste the following CSS code and Click on save button:

.bdp_blog_template .blog_header {
    margin: 0;
}
#main {
    padding-top: 10px;
}

Thank you!

[Theme Horse Support Team]

Hi Marc,

Can you please try adding below Custom CSS:

.wpml-ls-item a {
	margin-top: 1px;
}
.wpml-ls-item .screen-reader-text {
	position: relative !important;
}
.wpml-ls-item .wpml-ls-native {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	width: 1px;
}

Thank you!

[Theme Horse Support Team]

Hi Per Frykenvall,
please remove the css that you have added before and go to dashboard -> Appearance -> Customize -> Additional Css and paste the below custom css.

.top-navigation ul li ul {
    top: 44px;
}
.top-navigation a {
    padding-top: 10px;
    height: 24px;
}
.top-bar-wrap .social-profiles {
    margin: 10px 30px;
}
.page-title-wrap {
    padding: 10px 30px;
}

Thank you

[Charles Koehler]

Thank you mta for posting your code. That helped me as I was having the same hover problem. Adjusting the top margin worked for me. I’m sure it is a plugin that is also messing with the navigation… but I only have a few plugins installed and I need all of them. Thanks Theme Horse support for pointing out the plugin problem though!

[Jude]

I have premium Attitude on another website, but this site I’m doing is the free Attitude. How do I remove the white space above the Header image? I have tried below there is still a thin white line at top (http://MarketingYourArt.info):
#access {
margin-bottom: 0px;
}
.breadcrumb {
margin-bottom: 0;
}

[Malo Zollikofer]

Thanks ! With your indication, I finally managed to do what I wanted 🙂

To maybe help other people, I changed the language_selector_flags function with:

function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']){
				echo '<a href="'.$l['url'].'">';
				echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
                echo '</a>';
			}
        }
    }
}

To only show the language that wasn’t active (don’t wanted to show a french flag is the user was actually on the french version)

I placed: <div id="flags_language_selector"><?php language_selector_flags(); ?></div >

at the ligne 223 (in the child theme), like that:

echo '<nav id="access" class="clearfix">';
			echo		'<div class="container clearfix">';
				?><div id="flags_language_selector"><?php language_selector_flags(); ?></div ><?php
				wp_nav_menu( $args );
			echo '</div><!-- .container -->
					</nav><!-- #access -->';

So I had the flag inside the access and container div.

Finally, I used this CSS: `#flags_language_selector {
float: right;
margin-right: 10px;
margin-top: 5px;
}`

to have it at the right of the menu and looking aligned. I add some custom CSS to handle it correctly on the mobile view and I’m done !
Thanks for the help !

[Theme Horse Support Team]

Hi Stefan,

For to reduce the header spaces around the logo go to Appearance > Customize/Theme Options > Design Options Tab > Custom CSS paste the following CSS code and Click on save button:

.hgroup-wrap img {
    margin-top: 0;
    margin-bottom: 0;
}
.hgroup-wrap {
    padding-bottom: 20px;
}

Thank you for using our theme.

[mta]

I changed the custom css to this and so now the submenu works, doesn’t make content move, and doesn’t disappear when I go to click on a submenu item as I set the margin to be higher. However, now if you check it out in a responsive view and look at the menu, you will see little lines that are on the top of each menu listing. I do not like that the submenu line strikes-through the services label on the main menu in responsive view. Is there a way to remove those lines altogether?
/*
Submenu position
*/
.main-navigation ul li ul {
margin-top: -25px;
background-color: transparent;
border: 0;
box-shadow: none;

}

/*
menu
*/
.main-navigation a {
color: #2F2C54;
}

[mta]

Well I just changed the css to this and it seems to correct the problem well enough. However, my submenu will briefly adjust my main menu’s position upon hover. Also in responsive view, the submenu is a little far from the rest of the menu listings…. so if you know of a better way to adjust this css so that the submenu remains open on hover, but works with responsive, that would be great to know! 🙂

/*
Submenu position
*/
.main-navigation ul li ul {
position: static;
float: none;
width: auto;
margin-top: 40px;
background-color: transparent;
border: 0;
box-shadow: none;

}

[sara1]

Hi, I have this problem on my blog http://www.maison-shabby-chic.com . The “Blog” first element of the menu has a submenu (Video, Eventi, Lifestyle….) but when I hover with the mouse the menu disappear and I cannot click on it.

Here is the CSS file … anybody can help me please?
Thanks a lot. Sara P.

/* Dropdown */
#access ul li ul,
#access ul li:hover ul ul,
#access ul ul li:hover ul ul,
#access ul ul ul li:hover ul ul,
#access ul ul ul ul li:hover ul ul {
display: none;
z-index: 9999;
}
#access ul li:hover ul,
#access ul ul li:hover ul,
#access ul ul ul li:hover ul,
#access ul ul ul ul li:hover ul,
#access ul ul ul ul ul li:hover ul {
display: block;
}
#access ul li ul {
position: absolute;
background-color: #fff;
border-top: 4px solid #63C6AE;
top: 100px;
left: 0;
width: 190 px;
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#access ul li ul li {
float: none;
margin: 0;
}
#access ul li ul li a,
#access ul li.current-menu-item ul li a,
#access ul li ul li.current-menu-item a,
#access ul li.current_page_ancestor ul li a,
#access ul li.current-menu-ancestor ul li a,
#access ul li.current_page_item ul li a {
float: none;
line-height: 20px;
font-size: 13px;
font-weight: normal;
height: 100%;
padding: 6px 10px;
color: #777;
text-transform: capitalize;
}
#access ul li ul li a:hover,
#access ul li ul li:hover > a,
#access ul li.current-menu-item ul li a:hover {
background-color: #F9F9F9;
color: #63C6AE;
}
#access ul li ul li ul {
left: 190px;
top: 0;
border: 0 none;
-webkit-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.2);
}