Customizing topbar and heading.

  • Resolved Admiral

    (@aadmiral)


    11 years, 2 months ago

    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 – https://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.

Viewing 7 replies - 1 through 7 (of 7 total)

  • 1. You can do like this with custom links. All available fa- icon names can be found here.

    2. Add this too:

    .site-description { margin: 0; padding: 0; text-align: center; float: none; }

    Thread Starter Admiral

    (@aadmiral)

    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.

    Thread Starter Admiral

    (@aadmiral)

    Okay, got it with chrome dev tools.
    Looks like this: https://i.imgur.com/5wGk2r2.png

    But 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 – https://i.imgur.com/Xd2RXXi.png

    Not 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.

    Thread Starter Admiral

    (@aadmiral)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Customizing topbar and heading.’ is closed to new replies.