It looks like you have already removed the email and phone number, so the next thing to do is add some custom CSS. Go to Appearance > Edit CSS, and then add the following code:
.header-bottom {
padding: 0 !important;
background: #FFF;
}
.header-top {
background: #3A3C41;
min-height: 0 !important;
border-top: 4px solid #1ABC9C;
color: #FFF !important;
font-size: 12px;
padding: 0 !important;
}
You may want to tweak the styles a bit, but that should do it.
@johnna Armstrong thank you i really appreciate, that css code it really worked well.
@johnna Armstrong how can i remove title page in the middle of the every page because it is repeating on top part again and also to reduce the big space between the slider and the content in every page learning lion site
You can reduce the white space below the slider by adjusting this style:
.main-content {
padding: 60px 0;
}
I’m sorry, I’m not understanding what the title page is that you would like to remove. Can you give me an example?
Hi Johnna, how can i make my navigation bar transparent? I’ve tried different CSS code like .main- navigation
{background-color:transparent;}
I’m using the same theme as @johnloreng, the user above.
@daviesaina, it’s hard to tell for sure without a link to your site, but if it’s the same setup as @johnloreng, then this should work:
.header-bottom {
padding: 0!important;
background: transparent;
}
You may need to add !important to the background rule.
@johnna Armstrong i used this code to remove the white space bellow the slider but nothing is changing site
.main-content {
padding: 60px 0;
}
@johnloreng, try adjusting the 60px to something smaller (or to 0).
@johnna Armstrong thanks you, it is working great.
@johnna Armstrong is there any way i could increase size of the slider in learning lions so that on load it covers the whole section that you see before you scroll down. You can also help me out in putting an overlay color on the slider pictures
If you want to have a slider that covers the entire viewport on all devices larger than phones — it looks like you have mobile theme turned on for phones without the slider, right? — I’d recommend using another theme, rather than hacking up the one you’re using. Ascent is a great responsive theme that does a terrific job of scaling the slider images to all devices by width. Having a slider that covers the viewport requires scaling by height, and (typically) hiding part of the image on some devices. It also requires more planning for your slider images, because parts of them will be cut off on smaller viewports.
This falls into opinion-territory, but my feeling is that the theme you have will be easier to update going forward and cost less money to maintain than one that has a slider that covers the viewport. But if the slider covering viewport requirement is a “must have,” then rather than spend a lot of time hacking up this theme, you might consider using another, or installing a slider plugin that covers the viewport and uses a color overlay in the way you want.
Hi @johnna Armstrong, I’m having problems with targeting a particular page to add custom css code using page ID in Sydney themes. Am trying to add custom fullscreen header images on each page of startuplions site.Currently am using pootle page builder to add a background image but it’s not rsponsive on firefox web browser. Any ideas please? Thanks
Hi,
You may have already solved your issue, but each page on your site has a unique class based on the page ID that you can use for custom CSS.
The Startups = .page-id-34, for example
Regarding the responsiveness issue in firefox, again, you may have already solved the issue. I’m not seeing a difference to the site on iOS (iPhone 5), in Safari and Firefox. Have you already tried installing the plugin on a clean install with no other plugins installed and no custom CSS? If you have and are still seeing the firefox issue, you’ll probably want to contact the plugin creators. If not, that will give you a place to turn the plugins/css on and off to suss out the issue.
Johnna
