Chosen Theme – Header alignment
-
Hi Guys,
I tried a few css codes in my custom css to place my header menu to the center but without any success. I also want my header to be fixed / sticky.
I hope some of you can help me!
Thanks in advance.Homepage:
http://www.audio-mg.com
Theme: Chosen
-
Hello Maggie,
Right now you have your menu “floated” to the left and your social media icons to the right.. if you center your menu, what do you want your social media icons to do?
also, your menu is transparent right now, so if it is “fixed/sticky”, it will be very difficult to see when you scroll down and the menu is over content. If you want it to be stuck to the top of the screen, it might be good to change the background color of the menu.
Hi,
it would be good if my menu has a different colour than the rest of my page so that I can use a sticky header. But same problem. I just don´t know how to change these parts of my homepage.
You mean i´d be a problem if my menu is centered and the social icons are to the right?I guess vertical social icons to the right would look nice to me
Hello!! I’m really sorry, I was very busy at work all day yesterday.
you could try the following code in your custom CSS:
.social-media-icons { position: fixed; right: 4em; top: 1em; } .social-media-icons li { display: block; margin-right: 0; } @media (min-width: 56.25em) .menu-primary { display: block; float: none; text-align: center; position: fixed; width: 100%; left: 0; top: 0; padding: 1em 0 0; background: url(http://audio-mg.com/wp-content/uploads/2016/05/5540936-cool-white-backgrounds.jpg); }
That should center your menu and stick it to the top of the page. Right now, I just set the background to match the page.. But if you want to change it to a different color, just change the “background” at the bottom. The top two sections of css will also line up your social icons vertically and stick them in the top right corner.
Good luck!! Hope it works ok. Take care.
Also, I downloaded your mixtape. It sounds really good!! Have it playing right now. Music is life, keep doing what you love. Have a good one!
Hi!
Thanks for your reply…I tried adding the code to my custom css but unfortunately it has no effect. Only the social icons are vertical now.
Your code is still in my CSS so you can see the result. Maybe it helps you to fix the problem.PS: Thanks for your nice words in terms of my music…really appreciate it!
Ahhh, I’m sorry, I missed something when I copied my code.
try changing the .menu-primary part to@media (min-width: 56.25em){ .menu-primary { display: block; float: none; text-align: center; position: fixed; width: 100%; left: 0; top: 0; padding: 1em 0 0; background: url(http://audio-mg.com/wp-content/uploads/2016/05/5540936-cool-white-backgrounds.jpg); } }
Also, did you mean to change the background color of the page to white? If you will keep it white, then can change the background of the header too..
yeah it works! but the social buttons still looka bit weird…they do not harmonize with the menu. For now I will take them out.
Also the “selection-squares” of the header menu look a bit improper. As you can see they seem to overlap the menu bar.
If I want to change the colour of the header particualr. Which part of your code do I have to adjust?you can change the line..
background: url(http://audio-mg.com/wp-content/uploads/2016/05/5540936-cool-white-backgrounds.jpg);
to anything you want… for example, if you want the background to be white:
background: white;
great works peferkt!
But the square which apperas when you select e.g. portfolio. It overlaps a bit and doesnt look quite good.it would be great if my header could look / animate like this:
hmmm, can change the menu CSS to
.menu-primary { display: block; float: none; text-align: center; position: fixed; width: 100%; left: 0; top: 0; padding: 1em 0; background: #E8E8E8; z-index: 999; }
in order to add a little space under the buttons in the header.. and also to make it so the header is on top of the image slider (it is going behind it right now).
However, the animating when you scroll down might be a bit difficult.. it’s not just about CSS.
great this looks way better thanks!!!
Hi again…
when you check my homepage and navigate to “kompetenzen” you´ll see that the colour differs from my menu colour.
Could you help me please to change it to the menu colour?I found a better solution…thank you anyways!
How do I change the font size of my footer?
http://www.audio-mg.comThanks in advance
- The topic ‘Chosen Theme – Header alignment’ is closed to new replies.