Customizing topbar and heading.
-
Hello Alexander,
First I want to say thank you for this wonderful theme.
I’m a beginner in CSS, and I have a few questions, answers to which I have not found in existing themes here:1. I would like to add in the topbar several icons (Home button – just before the main menu, and Login button – before the search button).
As an example, I edited the picture – http://i.imgur.com/o1t7JQ8.png
It’s about what I want to get.2. How do I make the site name in Header – centered?
I tried to add the code for the logo –
. site-title {float: none;}
But it only works for the logo.
And an additional question – what do I need to edit in order to Site-Title change color when hovering?Thanks in advance.
-
Thanks, with the Header I did everything I wanted.
On the first question – it’s not something that I want.
When using icons in the menu – it applies to the menu style (icons smaller and without separators).
There is a desire on both sides to have 2 icons (Home and Info left and Search with Login on right). Text menu – positioned in the center.I still think it’s the easiest way to add it to the menu.
Then you would just look up the CSS ID for the link, and increase the font size / add separators as you wish.
#menu-item-2400 { font-size: 18px; border-left: 1px solid #fff; float: right; margin-right: 40px; }
As an example.
Okay, got it with chrome dev tools.
Looks like this: http://i.imgur.com/5wGk2r2.pngBut then I add code to CSS:
#menu-item-83 { font-size: 18px; border-right: 1px solid #222; float: left; margin-right: 5px; padding-right: 5px; }
#menu-item-107 { font-size: 18px; border-right: 1px solid #222; float: left; margin-right: 5px; padding-right: 5px; }
#menu-item-137 { font-size: 18px; border-left: 1px solid #222; float: right; margin-right: 60px; padding-left: 5px; }
Not all values are working. For example, no separators / borders – http://i.imgur.com/Xd2RXXi.pngNot perfect, but suitable. Thank you!
You could try forcing the border with !important, so that there is nothing overriding it – in case there would be any.
border-left: 1px solid #222!important;
If that doesn’t work, I’m unable to say what’s wrong unless I can inspect the page online.
Ye, it works with
!important;
, but there is another problem with covering area on icons (it is smaller than the square within the borders – not like a Search button).
Without borders a little better atm. May be handle this sometime later 🙂
Thanks again.Hi Alex,
In your response above (beginning “1. You can do like this with custom links….”)
I do not understand how to proceed because I only have on the left options to add “Page”,”Link”, “Category” and “Picture tag” menu items.
I must be missing something to add a “Custom” menu as I see in your screen copy??
Thanks
- The topic ‘Customizing topbar and heading.’ is closed to new replies.