Tagged: logo, menu, sticky header
- This topic has 15 replies, 3 voices, and was last updated 9 years, 8 months ago by Sakin.
-
AuthorPosts
-
February 26, 2015 at 5:25 am #52388luismarioochoaParticipant
Hello,
1. How can I make the Navigation Menu Fixed or Sticky, so when scrolling, the Navigation Menu stays visible at the top (instead of scrolling up out of sight) and the content (videos included) scroll behind it
2. How to add Transparency/Opacity to the site (I am in the process of changing the background by either adding an image or changing color).
3. How can I bring down the Search Box to the Right Red side of the header and eliminate the White Top space above the Header Image?This is the website I am working on http://www.BonVivantTravel.ca
These are the CSS I have already added:#slider-nav { display: none; }
.site { box-shadow: none; }
#site-logo, #header-right { padding-top: 0; }
.site { margin-top: 0; }
#hgroup-wrap { padding-bottom: 0; }Thank you so much in advance.
February 26, 2015 at 11:05 am #52406SakinKeymaster@luismarioochoa:
1. There is no option to make the the menu fixed or sticky. This theme is not designed like that. You can look for other themes at http://catchthemes.com/themes/category/premium/. Where we have Full Frame, Gridalicious, Catch Flames Pro and Catch Evolution Pro which has Fixed menu option.For Catch Everest Pro, you need to use plugin. I have answer this same question in http://catchthemes.com/support-forum/topic/fixate-menue-and-make-a-smaler-logo/
2. First add the image and then let me know it which places you want to make it transparent.
3. Please remove search from Header Top Sidebar and add it in Header Right Sidebar and let me know it. Then I can send you css to make it.
March 1, 2015 at 8:36 am #52549luismarioochoaParticipantThank you Sakim,
1. The plug in worked.
3. I removed the Search from the Top Side Bar and it is gone from where it was, the added a Search Widget to the Header Right Sidebar and it is not showing. Not sure if that was want you were advising. Still the White section above the Header Image is still Showing. Any advice on how to remove that?Here are my CSS:
#slider-nav { display: none; }
.site { box-shadow: none; }
#site-logo, #header-right { padding-top: 0; }
.site { margin-top: 0; }
#hgroup-wrap { padding-bottom: 0; }
#header-menu-sticky-wrapper { margin: 0 !important; }
.admin-bar .is-sticky #header-menu { top: 32px !important; }March 1, 2015 at 12:28 pm #52551SakinKeymaster@luismarioochoa: I see that you have remove Header. Since your image
http://www.bonvivanttravel.ca/wp-content/uploads/2015/02/HEADER_RED.png
is actually logo and not header featured image. So, you need to disable that from “Appearance => Theme Options => Header Featured Image Options” and add it from “Appearance => Header”. There you upload your full image or you can even choose from your existing media library. After you select it, if you want to load full image then click on Skip Cropping and save change.March 2, 2015 at 8:22 am #52568luismarioochoaParticipantThank you Sakim,
I tried that solution before ending up uploading it via Header Featured Image Options, but the PNG image which is 1140 px width, shows cropped even though I skipped cropping the width. What should the full width be in order to be the same as the Navigation Menu? Thank you.
March 2, 2015 at 10:22 am #52572SakinKeymaster@luismarioochoa: Maybe you are confused with padding left and right. It’s same you have to use 1140px width of image. When you use skip cropping it should work fine. But I see issue with your custom css. Find the following css:
.site { box-shadow: none; }
#site-logo, #header-right { padding-top: 0; }
.site { margin-top: 0; }
#hgroup-wrap { padding-bottom: 0; }Then replace it with the following css:
#hgroup-wrap, #site-logo, #header-right { padding: 0; }
.site { box-shadow: none; margin: 0 auto; }March 2, 2015 at 7:34 pm #52583luismarioochoaParticipantThank you Sakin,
That solution seems that is going to work but the default Catch Theme Featured Header Image needs to be removed and I don’t see a way to do it myself. Right now my Heather imaged uploaded as you advice is seating above your Everest image Climbers. You can see it at http://www.bonvivanttravel.ca
March 4, 2015 at 12:01 am #52640SakinKeymaster@luismarioochoa: You might want to try adding in the following css in “Appearance => Theme Options => Custom CSS” box:
#header-right {
margin-right: 10px;
margin-top: -60px;
}March 4, 2015 at 2:01 am #52653luismarioochoaParticipantThank you Sakim,
The Search is now in the desired place, however when mouse hovering over or trying to click on it, it hides and does not allow to search. Also, the default Catch Everest Image with the climbers is still there, I have erased the default link in Appearance->Theme Options->Featured Header Image Options, but nothing happens, I cannot disable the image that keeps coming right back. Please help. Thanks
March 4, 2015 at 11:12 pm #52695SakinKeymasterOk then remove the previous css that I gave you. Which is
#header-right {
margin-right: 10px;
margin-top: -60px;
}Then add the new css:
#header-left {
position: relative;
z-index: 1;
}
#header-right {
margin-right: 10px;
margin-top: -60px;
position: relative;
z-index: 10;
}You can just disable Header Featured Image. For that go to “Appearance => Theme Options => Header Featured Image Options” and in “Enable Featured Header Image”, you can select “Disable” and save changes.
March 11, 2015 at 11:48 am #53089luismarioochoaParticipantThank you Sakin,
1. Can you please help me with the responsiveness of the SEARCH BOX? It is not showing well on mobile, it is too large and cannot be recognized as a SEARCH BOX.
2. Is there a way to change the default set size of images to be inserted in pages or posts? Righ now I have to click on the image to edit it then select original size instead of the already set as default is 300×200 and make them to display centered without having to go to edit all the time?
Thank you so much in advance
March 12, 2015 at 11:08 pm #53179SakinKeymaster@luismarioochoa:
1. Let me know it what you want to do with the search. I think it’s better to hide it or show below the header image in mobile devices.
2. Image size is mentioned properly in theme instructions page at http://catchthemes.com/theme-instructions/catch-everest-pro/March 23, 2015 at 3:32 pm #54126nakulsachdevaMemberHi Sakin , Hope you are doing well !
This is my client’s site , http://www.katbates.com and they are very happy with this theme.
Good work by your team.Here is an issue that I would like to resolve with you.
At the top right corner there is a button to toggle.
* Site title to be visible at all times, without having to clicks on icon in top right corner
If your answer is that I can make it fixed from appearance >> theme options >>fix header option.
I dont see an option to click for fixed header.
I see only three option :
Check to disable Primary Menu
Check to disable Header Toggle
Check to disable Header RightIf I click disappear header toggle , It completely gets disappeared and I dont see the header that we want there.
Please reply ASAP.
Thanks
March 23, 2015 at 8:06 pm #54145SakinKeymaster@nakulsachdeva: sorry your site link is not working. Please check in. I am bit confused as Catch Everest Pro doesn’t have that option.
March 24, 2015 at 12:17 am #54181nakulsachdevaMemberI need the header that comes after we press toggle button to be fixed there..I mean It should be there permanently and we can disable toggle button..
March 24, 2015 at 8:51 am #54210SakinKeymaster@nakulsachdeva: I was confused as you used Catch Everest Pro support forum for Full Frame Free theme. Full Frame Free theme support forum is that http://catchthemes.com/support-forum/forum/full-frame-free/
That disable Toggle option is there in Pro version, you can see the list of additional features at theme instructions for pro version at http://catchthemes.com/theme-instructions/full-frame-pro/
But in free version, you can disable that toggle button and show header fixed only for big screens with resolution above 1100px. For that you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
@media screen and (min-width: 1101px) { .site { padding-top: 178px; } #feature-slider, #header-featured-image { margin-top: 0; } .site #masthead { display: block; opacity: 1 !important; } #header-toggle { display: none; } }
-
AuthorPosts
- The topic ‘Fixed/Sticky Menu and Transparency/Opacity’ is closed to new replies.