This topic has 32 replies, 2 voices, and was last updated 6 years by 
-
-
Hello,
How can I customize the main header of my site in the following ways?
1) Top bar is enabled, social share is enabled BUT it aligns left. How can I align the social icons to the right?
2) I chose the header layout that allows you to add banner text to the right of the logo, with the menu items below it. How can I align the menu to the right?
3) How can I tweak the alignment of the menu and the alignment of the banner text so that they both align to the same right-side margin? (Right now, the banner text can either be too far to the left, or too far to the right.. When centered it looks ok, but I won’t know if it’s “just right” until I can see the menu aligned right.)
Thanks in advance for your help!
Last question: How can I make just the row with the navigation a different color? So the part with the logo and banner text and the top bar above that stay white, and then the row with the nav change to blue with white text. Thanks!
Hello, can you share admin access so i can do the changes for you? 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, understood 🙂
Here add this to style.css of child theme and quick css of theme optionsCOPY CODEdiv#top-social { float: right !important; } div#top-social li { float: right !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Thanks Laura! Awesome- it worked 🙂 Also, if I wanted to make the icons slightly larger, can you please share the code that would do that?
Thanks so much!Hello, try by adding this to style.css of child theme:)
COPY CODEul.kleo-social-icons i:before { font-size: 14px !important; }If you are happy with the support please rate us 5 stars at themeforest 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi Laura,
Thank you! I will certainly give you a high rating on Themeforest.
Also, it turns out that I actually do need to do those other things I was asking about before:
I chose the header layout that allows you to add banner text to the right of the logo, with the menu items below it. How can I align the menu to the right?
How can I tweak the alignment of the menu and the alignment of the banner text so that they both align to the same right-side margin? (Right now, the banner text can either be too far to the left, or too far to the right.. When centered it looks ok, but I won’t know if it’s “just right” until I can see the menu aligned right.)
Lastly, is it possible to have two rows of navigation (primary and secondary) at the top, and at the top with this layout?
You can see in the attached image that I have included links in the banner text– but the vertical spacing isn’t right. Also, when I scroll (top bar is sticky), of course only the ‘actual’ navigation remains and the links from the banner text go away. Is it possible to have 2 rows of navigation? And also to make both of them sticky at the top?
Thanks so much!
Hello 🙂 I dont see the banner, can you add it?
So you want the
LOGO—BANNER
———-MENU HERE
Aligned like that?Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Understood, no problem 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi Laura,
I’m back 🙂
So yes, I do need to know how to have 2 rows of items in the menu bar:
There is a screenshot attached. I’d like to know how to set up the menu like this, with a second menu bar that is a different color, and for both bars to be sticky when you scroll.
Is this possible with the theme?
UPDATE:
I have set up the menu to have primary and secondary rows.. Is there a way I can make the secondary menu have a blue background (so it matches my previously-attached image)? Also, is there a way to reduce the spacing between the top and 2nd rows of navigation?
New screenshot attached, showing current menu setup.
Hello, please try by adding this to style.css of child theme
COPY CODE.secondary-menu.collapse.navbar-collapse.nav-collapse { background: #343a5c; width: 100%; height: 40px !important; } .secondary-menu.collapse.navbar-collapse.nav-collapse a { color: white; } ul#menu-update-december { float: right !important; } .kleo-main-header.header-normal .container { padding: 0px !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Always happy to help 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi again,
Thank you so much for the advice on how to alter the menu items.. I have 2 further questions:The dropdown menu is white with white text. How can I change the text color?
also, How do I remove the horizontal blue bar that appears in the navigation, to indicate which page we’re on? See the attached screenshot for reference.
Hello 🙂
Here add it to style.cssCOPY CODEul.dropdown-menu.sub-menu.pull-left a { color: #2f3958 !important; } .kleo-main-header .nav li.active a { box-shadow: none !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Happy to help 🙂
If you didn’t already, please rate us 5 stars at themeforest, it would help a lot 🙂Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi there! I’m back with question about the same things mentioned above 🙂 Note: I am using all of the code that Laura wrote on December 10, 2017 at 05:49
#182513Basically, I’d like to do the following (see screen shot for what I have currently):
1) Move the menu items so they align right
2) add an arrow or carat, something that indicates that “Our Services” and “Our Voice” have sub-menus
3) Increase the space between the Heard It From A Friend logo and the blue bar– bottom of logo to align with bottom of tagline..
4) I’d like to move the tagline so it is aligned right (so right edge of text aligns with the right edge of the white navigation text), only about 15px above the blue bar.Thank you!!!
Hello, for the menu, please try by adding this to style.css of child theme
COPY CODEul#menu-new-main-december { float: right !important; }For the caret add this
COPY CODEspan.caret { color: white !important; width: 15px !important; height: 15px !important; } span.caret:after { color: white !important; }For the logo use this
COPY CODEstrong.logo { margin-top: -10%; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Thanks Laura! You are awesome. That worked great!
One more question (sorry!):
When I scroll down, the blue menu bar is no longer full-width.. See attached screen shot. How do I fix this?
I think I would like to make the sticky menu area taller, with the blue bar being full width and the logo above it..
Thanks!Hello, if the menu is blue then the logo wouldn’t be visible, so i created this, it will become white when scrolled
Also a different version to keep it blue but not full widthVersion 1-
COPY CODE.kleo-main-header.header-left.header-scrolled #menu-new-main-december { background: white !important; } .kleo-main-header.header-left.header-scrolled #menu-new-main-december a { color: #303858 !important; } .header-scrolled strong.logo { margin-top: 1%; }Version 2-
COPY CODE.header-scrolled .menus-wrap { margin-left: 40%; } .header-scrolled strong.logo { margin-top: 1%; }If you are happy with the support please rate us 5 stars at themeforest, that would help a lot 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Happy to help 🙂
If you didnt already please consider a 5 star rating at themeforest 🙂Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi Laura,
Me again 🙂
When I make the font larger in the tagline, it floats upward and the bottom of the text is no longer aligned to the bottom of the logo.. How can I fix this? I tried adding a <br> before, and the effect was just to make the whole line disappear..Thanks!
Hello, please add this to style.css of child theme
COPY CODE.header-banner h5 { margin-top: 4%; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hello, try this
COPY CODEstrong.logo { margin-top: 1% !important; } .secondary-menu.collapse.navbar-collapse.nav-collapse { margin-top: 1%; } .header-banner h5 { margin-top: 7% !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Glad to help 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
The forum ‘General questions’ is closed to new topics and replies.
