- This topic has 3 replies, 2 voices, and was last updated 6 years, 11 months ago by
.
Hello,
I cannot seem to customize my header menu (e.g., background colors for menu headings, turning headings into buttons). My website is collegefirstgen.com . As you can see, the menu headings are all white. I want to modify the headings and want to know how to do so. Is it via custom css? And if so, can you share some custom CSS? Thanks.
Hi @sonthona,
I hope you are well today and thank you for your question.
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-header:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) .sh-nav>li.menu-item{ padding-top: 30px; padding-bottom: 30px; } #page-container .primary-desktop-light .sh-header:not(.sh-sticky-header-active) .sh-nav>li>a{ background-color: #9595d4; padding: 0 15px; border-radius: 10px; }You can change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.aspBest regards,
Shufflehound teamThank you so much for your response. This is helpful as I can the changes. I do have two follow up questions.
In the code you gave me, the buttons were turned into rectangles, can you point me to any resources that can change the buttons into other shapes (e.g., circles, squares and etc.). If there is a setting in the included theme I can use to control this feature, please let me know.
The other question I have is included in the attachment. I’m trying to get my homepage to match that of https://www.stmarytx.edu. If there’s custom codes I need to be aware of, please let me know. Thank you so much and your continued customer support. I really enjoy working with you guys.
Regards,
-SV
In the code you gave me, the buttons were turned into rectangles, can you point me to any resources that can change the buttons into other shapes (e.g., circles, squares and etc.). If there is a setting in the included theme I can use to control this feature, please let me know.
Just change border-radius CSS property value 10px in the above shared code.
The other question I have is included in the attachment. I’m trying to get my homepage to match that of https://www.stmarytx.edu. If there’s custom codes I need to be aware of, please let me know. Thank you so much and your continued customer support. I really enjoy working with you guys.
Just edit your home page and set its header style to default as shown in the attached screenshot then you can change its style from styling settings of theme.
