[Theme Horse Support Team]

HiBel,

You can decrease the above digit value as your need.
Anyways I have reduced it please go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

.hgroup-wrap {
    padding-bottom: 5px;
}
.hgroup-right {
    margin-top: 12px;
}
#site-logo {
    margin-top: 5px;
}

Thank you for using our theme.

[Bel]

Hi there,

I’m using the Jetpack Carousel gallery plugin with your free attitude theme. I’m having trouble with the descprition with underneath each gallery photo and have been in contact with Jetpack support but they say it is some code possibly from my theme conflicting with the plugin.

<style type=’text/css’>
#gallery-8 {
margin: auto;
}
#gallery-8 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 20%;
}
#gallery-8 img {
border: 2px solid #cfcfcf;
}
#gallery-8 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
</style>

Are you able to help at all??

thanks heaps

[Bel]

Hi I want the header to sit lower when displayed through the mobile version of the attitude theme. I was given this code however it doesn’t seem to be working.

@media only screen and (max-width: 767px) {
#site-logo {
margin-top: 10px;
}
.hgroup-wrap {
padding-bottom: 10px;
}
.hgroup-right {
margin-top: 17px;
}
}

Thanks heaps!

[chantal.attia]

Great it is that simple !
It doesnt’work on my site but I find this :

@media only screen and (max-width: 1078px) {
.featured-title, .featured-content {
		display: block !important;
	}
}
@media only screen and (max-width: 767px) {
         .featured-content {
		display: none !important;
	}
       .featured-title{
                font-size: 16px !important;
               max-width: none !important;
       }
}
@media only screen and (max-width: 479px) {
       .featured-title{
                margin-bottom: -20px !important;
               padding: 0px 10px !important;
       }
}

Here : Showing slider featured title and content on responsive screen sizes

Depending of the width I see only the title or the title+the content.
Perfect.

Thank you very much for the support.

[Theme Horse Support Team]

Hi Jeff,
Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

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

Thank you!

[Theme Horse Support Team]

Hi Paulien,

To reduce the white space in the header Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

.hgroup-wrap {
    padding-bottom: 21px;
}
#site-logo {
    margin-top: 12px;
}
.hgroup-right {
    margin-top: 18px;
}

And sorry you can not place the menu above the header by easy way because it’s a new feature to be add in the theme.
You have to hire a developer for this.

Thank you for using our theme.

[Theme Horse Support Team]

Hi kimpatt,

To have the more white space above and below the menu paste below code in the custom css:

.hgroup-wrap {
    padding-top: 25px;
    padding-bottom: 75px;
}
#access {
    margin-bottom: 70px;
}

And to make the font larger for the menu paste below code in the custom css:

#access a {
    font-size: 26px;
}

Thank you !

[Theme Horse Support Team]

Hi Ahmad,

Below is the css code for the custom button.

a.custom-button {
	background-color: #f5ab35;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	text-align: center;
	font-size: 16px;
	padding: 10px 30px; 
	color: #fff;
	margin-top: 20px;
	display: inline-block;
	-ms-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

Thank you!

[Theme Horse Support Team]

Hi ekke419,

Sorry! To activate the widget in top social profile area and to remove the link for telephone number it need code customization because its new features to be add. You have to hire a developer for this.

But you can make social icon bigger to do that Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

.social-profiles ul li a {
    font-size: 22px;
}
.social-profiles ul li {
    margin: 6px 0 0 10px;
}

Thank you!

[Theme Horse Support Team]

Hi ciaranhyde,
Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

#branding, 
.hgroup-right {
margin-top: 0;
}

Thank you!

[ciaranhyde]

HI

I am also having a problem with the header. I have a custom header which is the required height (250px) when I uploaded it there was a large white space at the top (above the header) so I used this code to remove padding:

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

However, while this did reduce the size of the white space at the top it did not eliminate it totally and so I now still have white space at the top? Is there another fix for this? Please see http://www.fionabrennanhypnotherapy.com

[Theme Horse Support Team]

Hi Elodie,

You have to add below html code manually to have the promobox inside the pages.

<section class="widget widget_promotional_bar clearfix">
  <div class="promotional-text">“Free Responsive Retina Ready WordPress Theme”
    <span>Free WordPress Theme has never been so easy & beautiful.</span>
  </div>
  <a title="View Work" href="#" class="call-to-action">View Work</a>
 </section>

And to manage it on center Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

.widget_promotional_bar {
    text-align: center;
}
.widget_promotional_bar .promotional-text {
    float: none;
    text-align: center;
    width: 100%;
}
.widget_promotional_bar .call-to-action {
    float: none;
    margin-top: 16px;
}

Thank you!

[Theme Horse Support Team]

Hi AlicePH,

To have the responsive menu toggles in tablet Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

@media only screen and (max-width: 1078px) {
#site-logo {
	margin-bottom: 32px;
}
.hgroup-right {
	padding-right: 0;
}
.search-toggle {
	display: none;
}
.menu-toggle {
	display: block;
	background-color: rgba(0, 0, 0, 0);
	font-size: 0;
	border: 0 none;
	padding: 0;
	color: #777;
	width: 30px;
	height: 21px;
	float: right;
	margin-top: 39px;
	cursor: pointer;
}
.menu-toggle:before {
	display: block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 25px;
	line-height: 0;
	font-family: 'Genericons';
	vertical-align: top;
	content: '\f419';
}
.hgroup-right {
	clear: both;
	float: none;
}
.nav-menu {
	display: none;
}
.toggled-on .nav-menu {
	display: block;
}
#access {
	float: none;
}
#access li {
	position: inherit;
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-left: 0;
}
#access a {
	float: none;
	padding: 10px 0;
	height: inherit;
}
/* 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: block;
}
#access ul li ul {
	position: inherit;
	top: 0;
	width: inherit;
	border: 0 none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#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 {
	padding: 10px 0 10px 15px;
}
#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: inherit;
}
#access ul li ul li ul {
	left: 0;
	padding-left: 6px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
}

Thank you!

[Ewald]

Hi,

when you look at the startpage
I added those two things to the custom.css

.wrapper {
 background-color: transparent;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#main {
  padding: 20px 30px 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

With the padding, I minimized the white space in the #main div at the top and bottom AND pushed the div to the left and right, so the width is the same as the header and footer. But when you minimize the window to get the mobile version, the #main div exceeds the width on the right side. I don’t know if padding is the proper way to do this, it worked for the “normal” view, so I used it temporary.

Thanks

[Ewald]

Hi,

I would like to insert a gap between my header/menu and the rest of the content. I played with margin-top and padding-bottom but I didn’t get the solution (only increased the space on the top of the content div).

Thanks in advance.