Hi,
I would like to change the color of navigation bar items as well as the navigation bar background in the website https://www.eurosystems.com/
Hi @sabahD,
i hope i understand you right.
You can change the color by using CSS
For example (will make the nav bar lightgrey and as nav item color a darker blue)
.header-container .header {
background-color: #e3e3e3;
}.header-container .header ul li a { color: #00205b;}
- Chris
Hi Where to find this CSS because I applied this code in Inline CSS
background: #262e7c; padding: 10px; border-radius: 5px;
you can see now how it looks
Hi @sabahD ,
Inline CSS - Style will be given directly to the element where you put them.
In a CSS file you can put statements further into the classes and do things you can’t do with inline styling (like media queries)
You already have a stylesheet “style.css”
But if you want to open a news stylesheet:
You can open a new stylesheet in HubSpot in the Design Manager → File → New File
Then choose style sheet
You can put your CSS statements into that File
If you don’t really have CSS experience, i like to refere to: CSS Tutorial
PS: The CSS window on the first screenshot, was a browser extension, just for trying/playing around with CSS, these were local changes
- Chris
Hi When I open new file it is asking to place in a location. the location shown in my design manager is in root folder
I created a navigation bar.css in rool
I found this code
/* @import url(‘http://example.com/example_style.css’); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
I replaced with the code you have given me to test but no changes have been done.
.header-container .header {
background-color: #e3e3e3;
}
.header-container .header ul li a {
color: #00205b;
}
for me it looks like it worked. Now you can change the background-color: #XXX
To you Hexcode of your choosing, same for the font-color: #XXX
- Chris
I have done it.
Now I need to know what to write in the CSS file to change the font size and font style
I need also to make the content of the navigation menu bold
@sabahD, i edited the code from above, with your colors
.header-container .header {
background-color: #262e7c;
}
.header-container .header ul li a {
color: #fff;
font-weight: bold;
font-size: XXpx;
}
Please put in the XX of “font-size: XXpx” Your font pixel size;
Please check: CSS Tutorial they have a good docu for that.
- Chris
i would recommend to remove the these blank navigation links and put a display flex into the navigation like:
.header-container .header ul {
display: flex;
justify-content: center;
}
- Chris
Hi thank you but it is not working. I have added it in the same style sheet
There is css, which binds stronger, try it with the following:
.header-container .header .hs-menu-wrapper.hs-menu-flow-horizontal>ul {
display: flex;
justify-content: center;
}
thank you I applied and it is working. But all the changes that I have done has impacted the vertical medu. The original design is attached in this ticket as well as the changes impact in home page. I would like to re-apply the original design of vertical menu in the homepage eurosystems.com, it is now displayed in eurosystems.com/news.
Please check attached images and help me restore the original vertical menu for all pages
NB: I tried to restore the previous version of home page but infortunately I can t find it.
Impact of previous change
Original
The sidebar styling is coming from another CSS file.
And if it had an impact on the menu, just exclude the CSS and you are back to the old styling
- Chris
Ok and how I can restore and apply to the home page the same header of the page https://www.eurosystems.com/news
Hi I can not understand, I excluded the CSS of the new navigation bar but the Sidebar menu is till remaining the same. How can I get back to the previous Sidebar menu
Hi @sabahD ,
i’m very confused right now, you have the new navigation bar and the old style of the sidemenu.
Isn’t it what you want?
- Chris
Hi,
I have fixed the issue.
Thank you