Hi Chriswieser,
To change the height of the primary menu go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:
#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!
Hi Jmcmillan7,
We apologies for the late reply. We missed your topic.
To add padding in above the top menu Go to Appearance -> Customize OR Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:
#site-logo {
margin-top: 30px;
}
#access a {
height: 80px;
padding-top: 60px;
}
#access ul li ul {
top: 140px;
}
.search-toggle {
margin-top: 60px;
}
And to have the top info bar Go to Appearance -> Customize OR Theme Options -> Contact / Social Links Contact Info Bar
Thank you!
Hi edmiller1993,
To put the navigation along side the header image 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 (min-width: 1024px) {
.hgroup-wrap {
float: left;
}
#access {
float: right;
margin-top: 60px;
}
.slogan,
.featured-slider {
clear: both;
}
}
Thank you!
Hi Kyle,
To align the menu vertically centered as of your logo height. Go to Appearance -> Customize -> Ambition Theme Options -> Custom CSS and paste the below CSS code then click on Save & Publish button.
.main-navigation a {
height: 67px;
padding: 42px 0 0;
}
.main-navigation li {
position: relative;
}
.main-navigation ul li ul {
top: 109px;
}
.search-toggle {
margin-top: 42px;
}
#search-box {
top: 90px;
}
@media only screen and (max-width: 767px) {
.menu-toggle {
margin-top: 36px;
}
}
Thank you!
Hi Jon1,
To create a child theme you need to create style.css first. Just create a ultimate-pro-child folder inside wp-content/themes. Under style.css file add below code:
/*
Theme Name: ultimate Pro Child Theme
Author: Self-Help WordPress User
Template: ultimate
*/
@import url("../ultimate-pro/style.css");
.menu-toggle:before {
content: "menu";
}
.menu-toggle {
margin-top: 12px;
}
We are busy moving theme options settings to WP customizer.
It will take some time to be fully woo-commerce compatible.
Thank you!
Hi Dheeraj,
To show the social profiles and search in smaller devices 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: 767px) {
.social-profiles {
margin-top: 12px;
}
.social-profiles, .search-toggle {
display: block;
}
.social-profiles, .social-profiles ul {
float: left;
}
.search-toggle {
float: left;
margin: 20px 5px 0;
position: relative;
}
#search-box {
right: 25px;
top: 60px;
}
}
Thank you!
Hi,
first of all, thanks for this great theme. I like it a lot and I’m realy happy with it. But I have one small problem with the menu.
Tried to get the menue sticky, worked more than les fine, but then I checked for several Browsers on https://www.browserstack.com/screenshots
I saw the code I’m using is just working fine in modern browsers. IE 9 and lower makes a lot of trouble.
This is the code I’m using at the moment (also checking screen width, cause sticky on mobile makes no sense to me):
@media screen and (min-width: 800px) {
/* Menü on top */
.hgroup-wrap{
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
}
Does somebody have an idea, how to optimize the css?
An other thing is the width i am struggling with of the hgroup-wrap. I set it to 100% to have full width at the moment. But what I would realy like is to have it in the same width than the content area.
Assigning a pusition absolut and margin left and right to 0 doesn’t bring the expected result, because it seams the hgroup-wrap is not directly assigned to the main content box.
What I would realy love to have is a sticky header like on this page: http://www.heilpraxisnet.de/ Is this possible with this theme?
The link to my page with the actual css is http://www.b-scheidt.de
Thanks a lot and regards!
How do I get the space under the revolution slider like on the demo page?
Tried the css as follows (found that solution in another post) but it didnt work
.slogan {
margin-top: 40px;
}
Hi Martin,
To reduce the space you have to use the medium size logo OR you can add the custom CSS to reduce the space around the logo. For that go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on Save & Publish button.
#site-title a img {
max-width: 220px;
}
#site-logo {
margin-top: 0;
}
.hgroup-wrap {
padding-bottom: 12px;
padding-top: 10px;
}
Thank you for using our theme.
Hi Edinahofer,
To make the logo close with the image slider on the left side and so also the menu and also to remove the white space Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:
.hgroup-wrap .container {
max-width: 98%;
}
.search-toggle {
margin-top: 29px;
}
#search-box {
top: 70px;
}
#access a {
height: 41px;
padding: 19px 0 0;
}
#site-logo {
margin-top: 4px;
}
.search-toggle {
margin-top: 19px;
}
#access ul li ul {
top: 60px;
}
Thank you!
Hi Info,
Could you please provide us the temporary username and password to your site via Email so that we can have a look into your issue.
Do not share any username and password here in this forum.
Also to reduce the space in the header and the footer please login to you WP admin dashboard and Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:
#access a {
height: 41px;
padding: 25px 0 0;
}
.search-toggle {
margin-top: 25px;
}
#site-logo {
margin-top: 17px;
}
#access ul li ul {
top: 66px;
}
#colophon .widget-area {
padding: 30px 0 0;
}
Thank you!
Hi Jolantapawelec,
To add the space between the menu and the slider Go to Appearance > Theme Options > Design Options Tab > Custom CSS paste the following CSS code and Click on save all changes button:
.featured-slider {
margin-top: 10px;
}
Thank you!
Hi beth_almeida,
First of all create a child theme and paste the below code in your style.css
Add this below code in your style.css file
/*
Theme Name: Ambition Child Theme
Author: Self-Help WordPress User
Template: ambition
*/
@import url("../ambition/style.css");
@media only screen and (max-width: 1023px) {
.hgroup-right {
padding-right: 0;
min-width: inherit;
}
.search-toggle {
display: none;
}
/* Responsive Navigation */
.menu-toggle {
display: block;
background-color: rgba(0, 0, 0, 0);
font-size: 0;
border: 0 none;
padding: 0;
color: #666;
width: 30px;
height: 21px;
float: right;
margin-top: 19px;
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;
}
.main-navigation {
float: none;
}
.main-navigation li {
position: inherit;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-left: 0;
}
.main-navigation a {
float: none;
padding: 10px 0;
height: inherit;
}
/* Dropdown */
.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 ul li ul {
position: inherit;
top: 0;
width: inherit;
}
.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
padding: 10px 0 10px 15px;
}
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
background-color: inherit;
}
.main-navigation ul li ul li ul {
left: 0;
}
.main-navigation ul li ul li ul li a,
.main-navigation ul li.current-menu-item ul li ul li a,
.main-navigation ul li ul li.current-menu-item ul li a,
.main-navigation ul li.current_page_ancestor ul li ul li a,
.main-navigation ul li.current-menu-ancestor ul li ul li a,
.main-navigation ul li.current_page_item ul li ul li a {
padding-left: 21px;
}
}
Thank you!
Hi Justyn,
To reduce the height of 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: 0;
}
.hgroup-right {
margin-top: 20px;
}
#site-logo {
margin-top: 0;
}
And your red button text color is already in white color not gray.
Thank you!
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.
