Hello. I want to create a header with specific size and a logo which is placed perfectly in the middle of the header. I can not understand well how to adjust the parameters of the logo, header, menu items, so that they are placed properly. Also, I can not find any way to change the header color from your options. I can change the font color, the buttons color, etc, but the only change I can apply to the header is pick between light and dark (white and black).
Best
Hi there,
Thanks for writing in! You can customize the X header’s basic settings via X > Theme Options > Header however X header was not designed for in-depth changes as we often receive header related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro. If you need in-depth changes, please consider upgrading to Pro so you can build a custom header yourself without custom coding. In case you upgrade to Pro and you get stuck with the options, we’re here to assist all the way. Please see https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103
If you’re okay with custom coding then you can customize the X header using custom CSS, to change the header background color you can make use of the following code:
header.masthead .x-navbar {
background: #69c1e3;
}
To adjust logo size, navigate to X > Theme Options > Header > LOGO – IMAGE and adjust the Logo Width (see screenshot)
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
Great, thank you!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.