[Theme Horse Support Team]

Hi Daniel,

You have uploaded a big logo which pushes the menu bar and shows gap issue so to fix the logo as the logo you have uploaded Go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save button:

#site-logo {
    margin-top: 10px;
}
#site-title a img {
    max-width: 180px;
}

Thank you!

[karen2]

Hi,

thank you for the code; I’m not not clear on where exactly to put it within the CSS. This is what I have showing now:

/* =Menu
-------------------------------------------------------------- */
#access {
	float: right;
}
#access li {
	float: left;
	position: relative;
	margin: 0 0 0 20px;
}
#access a {
	color: #435464;
	display: block;
	float: left;
	font-size: 16px;
	text-transform: uppercase;
	padding: 40px 0 0;
	height: 50px;
}
#access a:hover,
#access ul li.current-menu-item a,
#access ul li.current_page_ancestor a,
#access ul li.current-menu-ancestor a,
#access ul li.current_page_item a,
#access ul li:hover > a {
	color: #0ea6b5;
}

/* 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 #0ea6b5;
	top: 100px;
	left: 0;
	width: 190px;
	-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: #0ea6b5;
}
#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);
}

Thanks in advance, again.

[floodm]

Guessing whoever designed didn’t use a child theme and edited actual theme files?
Of course, Im an idiot and didn’t back up before updating…

Any ideas how to revert? Can I put an older version of theme back to fix until I can undo the modifications they did?

Lots of Short code showing up

[container style=”fluid” bg_color=”#181818″ img_position=”scroll” text_color=”#666666″ margin_top=”-50″ margin_bottom=”60″ padding_top=”50″ padding_bottom=”50″] [one_third]

Thoughts?
Thanks.

[Theme Horse Support Team]

Hi Mahy,

Sorry for the late reply we missed your topic.
To fix the issue that you are having in the menu please go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save button:

.container {
    padding: 0;
}
#access li {
    margin-left: 10px;
}
#access a {
    box-sizing: content-box;
}

Thank you!

[dmroliff]

Hi,

I am using the Clean Retina theme for a friend’s website. My question is, will adding a little bit of custom CSS interfere with the theme’s automatic formatting for mobile devices ( responsive )? The site seems to format just fine on my iPad but he’s telling me it doesn’t format correctly on his iPhone or his PC tablet. Thanks.

edit: I’ve just updated from Clean Retina 2.0 to 3.0 and it appears I’ve lost the custom CSS below. I can no longer find ‘theme options’under the ‘Appearance’ category in the left hand column of my WordPress editor. That is where I was able to add custom CSS. I might have to go back to square one now. 🙁

here is the custom css I’ve added…

.entry-header { width: 200px; height: 15px; border: 0pt solid black; text-align: center; margin: -45px auto 0px auto;
}
.entry-title { font-size: 14pt; height: 30px; margin: -55px auto 0px auto; border: 0pt solid black;
}
#branding { background-image: url("http://shawnjomalley.com/wp-content/uploads/2014/11/custom-header-001rev002.png"); background-repeat: no-repeat; background-position: center;
}
#site-title { font-size: 18pt;
}
#access { margin-top: 120px; height: 33px; margin-bottom: 0px;
}
#access a { padding-top: 5px;
}
#access a:hover, #access ul li.current-menu-item a, #access ul li.current_page_ancestor a, #access ul li.current-menu-ancestor a, #access ul li.current_page_item a, #access ul li:hover > a { padding-top: 0px; height: 30px;
}
/* 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 {
	border-top: 0px solid #5f85b0;
	position:absolute;
	background-color: #fff;
	top:35px;
	left:0px;
	width:190px;
}
#access ul li ul li {
	float:none;
	border-bottom:1px solid #ddd;
	border-right:0 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 {
	color:#999;
	border-top: 0 none;
	float:none;
	line-height:21px;
	font-size:17px;
	font-weight:normal;
	height: 100%;
	padding: 8px 10px;
}
#access ul li ul li a:hover, #access ul li ul li:hover > a, #access ul li.current-menu-item ul li a:hover {
	border-top: 0 none;
	background-color: #f5f5f5;
	padding: 8px 10px;
	color: #5f85b0;
        border: 0pt solid black; height: 21px;
}
#access ul li ul li ul {
	left: 190px;
	top: -5px;
}
#access select { 
	display: none;
}

[clarissavazmagalhaes]

Hi there,

I made some changes in the Attitude Theme in this website: http://www.reikiwithshelly.com. I noticed that it looks fine in most browsers, but I tried it on my iPhone and it simply doen’t work. The menu is missing, the text on the homepage is off and I can’t even go to another page.

The only changes I made in the CSS were:

– Line-height for the <h2> tag.
– Decreased the white space at the top of the page, above the picture with the logo. And, for that, I copied a code that you guys posted in another thread:

hgroup-wrap {
padding-bottom: 5px;
padding-top: 0;
}
.hgroup-right {
margin-top: 5px;
}

– Changed the text alignment to be beside the picture in the homepage, instead of below the picture. And for that I just changed the post code to “alignleft”.

These are quite simple changes, so I wasn’t really expecting to have this problem in the iPhone. Could you help me to fix it?

[toddw]

I’m sure that my drop down menu has separated from the navigation bar as a result of the frame and other CSS that I added in order to shrink the height of the menu of my site at http://framella.com :

http://userpages.bright.net/~toddw/drop-down-menu.png

#page {
   background-color: #2a2a2a;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0 40px 40px 40px;
}
/* Header Info Bar */
.info-bar {
	background-color: #2a2a2a;
	padding-bottom: 3px;
	font-size: 14px;
}
#site-logo {
	overflow: hidden;
	float: left;
	margin-top: 5px;
	margin-bottom: 4px;
}
.main-navigation a {
	color: #666;
	display: block;
	float: left;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: normal;
	padding: 22px 0 0;
	height: 36px;
}

… but what CSS would I need now in order to move the drop down menu up closer to the main menu?

Thanks and regards,
Todd

[Benjamin]

Hey guys,

at the moment Custom CSS is

.hgroup-wrap,
#access {
    position: fixed;
    width: 100%;
    z-index: 100;
}
.hgroup-wrap {
    background-color: #fff;
    top: 0;
}
#access {
    top: 105px;
}
.header-main {
    margin-top: 155px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.hgroup-wrap, #access {
		position: fixed;
	}
	.header-main {
		margin-top: 0;
	}
}
#site-generator {
    position:fixed;
    bottom:0;
    width:100%;
    background-color: #fff;
}
#colophon .widget-wrap {
    padding-bottom: 64px;
}

Page link is https://www.benjamin-bauer.de/impressum/

Br
Ben

[Theme Horse Support Team]

@mail16 Sorry! Please add below Custom CSS too

.header-main {
    margin-top: 155px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.hgroup-wrap, #access {
		position: fixed;
	}
	.header-main {
		margin-top: 0;
	}
}

Thank you!

[Theme Horse Support Team]

Hi Ardit.bejtu,

To reduce the white space in the header as your need go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save button:

.hgroup-wrap {
    padding-bottom: 10px;
    padding-top: 0;
}
.hgroup-right {
    margin-top: 15px;
}

Thank you!

[lemonpath]

Hi

I have cleaned up my plugins but I am reluctant to deactivate some of them such as my subscribers list. I did some changes to my css file, could this be the problem.

#site-logo {
float: none;
}

.sidebar img {
margin-top: 10px;
margin-bottom: 10px;
}

.social img {
display: block;
float: left;
margin-top: 5px;
margin-bottom: 5px;
}

/*.branch {
content: ”;
background: url(http://lemonpath.com/wp-content/uploads/2014/07/Line-4_Pixejoo.png) no-repeat center center;
width: 100%;
height: 23px;
margin: 0 auto;
left: 0;
right: 0;
margin-top: -30px;
margin-bottom: 10px;
}*/
#access {
border-bottom: 0;
}

#access ul li ul li {
border-bottom: 0;
}

#access li {
background: url(http://lemonpath.com/wp-content/uploads/2014/07/nav-e14061423015441.png) no-repeat center center;
width: 150px;
margin-right: 20px;
}

#access a:hover, #access ul li.current-menu-item a, #access ul li.current_page_ancestor a, #access ul li.current-menu-ancestor a, #access ul li.current_page_item a, #access ul li:hover > a, #wp_page_numbers ul li a:hover, #wp_page_numbers ul li.active_page a, .wp-pagenavi .current, .wp-pagenavi a:hover, ul.default-wp-page li a:hover, .pagination span, .pagination a:hover span {
color: #fff;
}

#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 {
color: #f3f3f3;
}

a, #site-title a span, #site-title a:hover, #site-title a:focus, #site-title a:active, .featured-text span, #content ul a:hover, #content ol a:hover, .services-item a:hover .service-title, .entry-title a:hover, .entry-title a:focus, .entry-title a:active, .entry-meta a:hover, .tags a:hover, .custom-gallery-title a:hover, .widget ul li a:hover, .widget-title a:hover, .widget_tag_cloud a:hover, #site-generator .copyright a:hover, #access ul li ul li a:hover, #access ul li ul li:hover > a, #access ul li.current-menu-item ul li a:hover {
color: #fff;
}

#access a {
color: #f3f3f3;
}

.entry-title:hover, .entry-title a:hover {
color: #254A89;
}

#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-left: 18px;
}

#access ul li ul {
background: none;
border: 0;
}

#access ul li ul li a:hover, #access ul li ul li:hover > a, #access ul li.current-menu-item ul li a:hover {
padding: 8px 18px;
background: none;
}

input.wysija-submit.wysija-submit-field {
background: transparent url(“http://lemonpath.com/wp-content/uploads/2014/07/subscribe.png&#8221;) no-repeat left top;
background-size: contain;
width: 90%;
height: 90px;
border: none;
text-indent: -999px;
overflow: hidden;
margin-left: 20px;
margin-right: 20px;
}

body.blog #primary {
width: 100%;
}

body.blog #secondary {
display: none;
}

article {
background: #edffee;
padding: 20px;
}

#main {
padding-bottom: 20px;
}

.wpcf7 {
margin-top: 20px !important;
}

.wpcf7 input {
margin-bottom: 10px !important;
}

.wpcf7 input[type=”submit”] {
margin: 0 !important;
background-color: #e8ffe8;
}

#wysija-2 {
/*width: 18% !important;*/
}

#wysija-2 .widget-title {
/*font-family: ‘Poiret One’, sans-serif;
color: #5f5981;
text-shadow: 1px 0 rgb(95,89,129);
font-size: 18px;*/
}

a.srp-post-title-link {
font-family: ;
}

.entry-title p,
.entry-content p,
.entry-summary p {
font-family: ‘Poiret One’, sans-serif;
color: #000000;
}

/*Tagline/Slogan Color*/
.site-description {
color: #5f5981;
}

.wp-caption .wp-caption-text {
font-family: ‘Poiret One’, sans-serif;
color: #5f5981;
}

#secondary .widget img.aligncenter,
#secondary .wp-caption {
margin-bottom: 0;
}

[Theme Horse Support Team]

Hi Lee,

Thank you for the site URL.
Edit your custom CSS accordingly to the below one:

#access a {
    height: 81px;
    padding-top: 65px;
}
.search-toggle {
    margin-top: 25px;
}
#search-box {
    top: 100px;
}

@media only screen and (max-width: 767px) {
	.menu-toggle {
		margin-top: 57px;
	}
	#access a {
		float: none;
		padding: 10px 0;
		height: inherit;
	}
}

Thank you!

[sarahadams]

I am trying to make my website more mobile friendly and aesthetic, since most of my readers are visiting from mobile devices, and after I checked the add custom css to responsive theme, everything but the site title scales down. A snippet of my custom CSS… #site-description {
text-align: center;
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: bold;
margin-top: 10px;
}

#site-title {
text-align: center;
font-family: Montez, Tangerine, serif;
font-weight: none;
font-size: 75px;
}

I’ve tried translating it into ems and it hasn’t worked, mind you, I am new to customizing css for mobile. my site is http://www.thestayathomesoprano.com. I have left the modified css up so the problem in the mobile site can be seen.

all my custom css below…

@import “https://fonts.googleapis.com/css?family=Tangerine:400,700|Montez”;

@import “https://fonts.googleapis.com/css?family=Quattrocento:400,700|Life+Savers:400,700&subset=latin,latin-ext”;

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.signature {
font-family: tangerine, Montez, serif;
font-size: 64pt;
text-align: center;
line-height: 75px;
}

.Plugin {
font-family: quattrocento, ‘life savers’, Serif;
font-size: 14px;
line-height: 30px;
font-weight: bold;
}

#site-description {
text-align: center;
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: bold;
margin-top: 10px;
}

#site-title {
text-align: center;
font-family: Montez, Tangerine, serif;
font-weight: none;
font-size: 75px;
}

.entry-title {
font-family: ‘life savers’, quattrocento, ‘gentium basic’, serif;
}

#content .post {
font-family: quattrocento, ‘gentium basic’, serif;
}

input[type=”email”], textarea {
line-height: 35px;
font-size: 16px;
font-family: ‘life savers’, ‘gentium basic’, serif;
}

.widget-title {
font-family: ‘life savers’, ‘gentium basic’, serif;
font-size: 30px;
font-weight: bold;
}

.widget {
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: bold;
}

.nav {
font-family: ‘life savers’, ‘gentium basic’, serif;
}

#access li {
font-family: ‘life savers’, ‘gentium basic’, serif;
font-weight: 900;
}

.recipe {
font-family: ‘life savers’;
font-weight: bold;
font-size: 18px;
}
}

.recipe-title {
font-family: ‘life savers’;
font-size: 36px;
font-weight: bold;
}

.recipe-author {
font-family: ‘life savers’;
font-weight: bold;
font-size: 18px;
}

.recipe ol {
font-family: ‘life savers’;
font-weight: bold;
margin-bottom: 5px;
}

.recipe ol li {
margin-bottom: 40px;
}

#recipe {
border: 2px solid #000000;
padding: 10px;
margin-bottom: 20px;
}

Thanks! 🙂

[Theme Horse Support Team]

Hi Lee,

Please go to the Appearance > Customizing > Layout Options > Responsive Layout and ON the responsive layout and just paste the below code in custom CSS and remove your all code:

#access a {
    height: 45px;
    padding-top: 25px;
}
.search-toggle {
    margin-top: 25px;
}
#site-logo {
    margin-top: 18px;
}
#access ul li ul {
    top: 70px;
}
@media only screen and (max-width: 767px) {
    #site-logo {
        margin: 10px 0;
    }
    .menu-toggle {
        margin-top: 17px;
    }
}

Thank you!

[Lee Ann]

I was responding to the original post: https://www.themehorse.com/support-forum/topic/change-height-of-primary-menu-container/

I entered your code to change the height of the primary horizontal menu.

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

@media only screen and (max-width: 767px) {
#site-logo {
margin: 10px 0;
}
.menu-toggle {
margin-top: 17px;
}
}

BUT – now the mobile menu is super spaced out. How can I fix this? Here is all of the Custom CSS I have:

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

@media only screen and (max-width: 767px) {
#site-logo {
margin: 10px 0;
}
.menu-toggle {
margin-top: 17px;
}
}
#access ul li ul {
top: 120px;
}
hr{
padding: 5px;
margin: 0px;
margin-top:-1em;
}