modifying home page header

  • Is it possible to modifying home page header ( where the words are about etc…) with the Harmonic Theme. I want instead the black background a white background and the written letter words in black instead of white.

    thanks for any help
    Warmly andrea

    The blog I need help with is: (visible only to logged in users)

  • Hi Andrea,

    Your site is currently using the Shoreditch theme which already has a white menu section. If you do want to check out the Harmonic theme with a white header bar then you should copy this into the CSS section of the customiser.

    #masthead {
      background-color: #eee;
    }
    #masthead h1, #masthead h1 a, .social-links ul li a::before, .main-navigation li a, .main-navigation li a:visited {
      color: #111;
    }
    .main-navigation li a:hover {
      color: #777;
    }

    You can pick out whichever hex colour codes you like, I’ve gone for dark grey and off-white as it makes things a bit easier to read on today’s bright laptop and mobile screens.

  • Hi,
    Thank so much for your help. I was able to use it in the Harmonic theme and it shows perfect on my computer but on my mobile phone it does not work. what else I have to do that it will work as well on the mobile phone

    also do you know if in the Harmonic Theme it is possible to have the Menu pages as well one after the other vertically scrolling down in the front page

    thanks for your generous time and help

    warmly andrea

  • Hi Andrea,

    Add the following and it should fix the colour for mobiles too:

    #mobile-panel {
    	background-color: #fff;
    }

    I’m not sure you mean about the vertically scrolling menu pages bit, could you explain a bit more. Or better yet link to a site (or existing WordPress.com theme) which demonstrates what you’re trying to achieve?

  • thanks so much that worked..Ok I actually mean something a little different I think.
    So If I have 8 portfolio project and I would like to assign to each top page two to four specific profolio’s is that possible?

    Also can I re-organize portfolios

    thanks for your help…

    I did not see a wordpress that does that but I would like to do it.

    warmly andrea

  • I’m still a bit confused, do you want the portfolio pages to be listed in your menu as a drop-down under “projects”?

  • yes – I would like four of the portfolio pages to be listed as a drop down menu under projects but as well two other once I would like as a drop town menu under 1067PacificPeople (about)

  • @1067pacificpeople, you can add Custom Links to your menu and also organize your menu as desired. Simply get the URLs of the pages you wish to add to the submenus and then add the custom links and arrange them as you desire.

  • Ok will try -hope it will work

    one more thing – can I change the size of the fonts on the top of the menu and as well in the text —they give choices of headings but then the text is why to big…where can I choose my own size of font like a 14 or so

    thanks for help

    warmly andrea

  • You can change the navigation menu and main content font sizes with the following 2 rules (they’re set to 13 and 14px respectively in my example):

    .main-navigation a {
    	font-size: 1.3265em;
    }
    .entry-content {
    	font-size: 1.25em;
    }
  • thanks so much
    but there is a strange thing happen not when I look at the mobile phone but on the computer —there is below of the menu a big white cap with two little symbols…how to make less a white cap…thanks for help

    if you can check it and let me know how to avoid such a big gab

    http://www.pacificpeople.nyc

    thanks so much

  • Hi I figured it out the white cap and solved that….next thing I can not figure how the sub item is visible …I added a sub item in the menu under project but I can not see it…thanks for help

    warmly andrea

  • It’s there, you just need to click the main item for it to appear. At the moment the sub menu indicator is hard to see and the drop-down section is still using the old colours. Try replacing your existing first rule with this to change the background:

    #masthead, .main-navigation ul ul {
    	background-color:#fff
    }

    And then adding the following to change the arrow colour so it’s easier to see:

    .showsub-toggle::after {
    	color: #888;
    }
    .showsub-toggle:hover::after, .showsub-toggle:focus::after {
    	color: #111;
    }
  • Oops, I missed the sub-menu text hover colour. You’ll want to swap your third rule with this to fix it:

    .main-navigation li a:hover, .main-navigation ul ul a:hover {
    	color:#888
    }
  • The topic ‘modifying home page header’ is closed to new replies.