Need help? Check out our Support site, then


New Theme - How to change in menue: font + color and minimize distances

  1. Hi support!
    I changed the theme of my website http://www.strietz.de. The new twentyforseven theme is cool but I can not find the css commands or options that I need for some things:

    See the picture in this link to understand my problems:
    https://drive.google.com/file/d/0B3YFCieQFRWJeFpsNDVvbGRmNkE/view?usp=sharing

    Red bullet 1): I want to change the font size and the color of the menu top text
    Red bullet 2): I want to change the font size and the color of the lower text (menu points) and the color of the selector line (grey in the screenshot) and the color of the currenty selected text ('under the selector' - currently white text)
    Red buttet 3) + 4): IMPORTANT There is really to much space in the selected areas. I want the text much closer to the top!!
    Red bullet 5): IMPORTANT: I need to change the font size and the position (left / rigt / central) of the main text. It's to small at the moment

    Can you help me? It's very important because this is a business website. Thanks in advance!
    Fredrik

    The blog I need help with is strietz.de.

  2. Hi Fredrik, I'm seeing the Twenty Seventeen theme on the site you reference, is that the site and theme you are talking about? If so, to add the custom CSS for the changes you want to make, you would need the WordPress.com Premium Plan or WordPress.com Business plan upgrade, both of which include Custom Design and Custom CSS.

  3. Hi thesacredpath, thanks for your answer. I think I have the possibility for custom design and custom css because I can choose: "Themes" -> "Customize" > "CSS" > "Your customization for CSS". So if you can give me the code I can paste it in the css editor...

  4. Ah, sorry, I see you have Custom Design upgrade.

    Can you give me a link to the page you took the screenshot from and I would be happy to help.

  5. Actually, I now see on your main page. I definitely need more coffee. I'm going to be away for a few hours, but will work on these for you when I return.

  6. To get you started, the following allows you to adjust the spacing above and below the page titles (3 and 4).

    .panel-content .wrap {
      padding-top: 3em;
    }
    .page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
      margin-bottom: 2em;
    }
  7. Hi, thanks - it works to 50% :-) . The syntax "...padding-top: 3em;" seems not to take efect - nothing changes....
    The other syntax "...margin-bottom: 2em;" takes efect. That's great!

    Can you check, if there is a syntax error in the first part?

    Can you help me with the other questions?
    - In point (5) I want to set the text in the "center" and not "left-aligned". And can I change the size?
    - In point 1) and 3) I want to change the text- and selector color in the menu....

    Thanks in advance!
    Fredrik

  8. Hi again,

    that's crazy - now also the syntax "...padding-top: 3em;" takes effect. I dont't know why this part of the change seems to need a little time to take efect... So the script you gave me works to 100%. Thanks!

    Can you help me with the other questions?
    - In point (5) I want to set the text in the "center" and not "left-aligned". And can I change the size?
    - In point 1) and 3) I want to change the text- and selector color in the menu....

    Thanks in advance!
    Fredrik

  9. For #1 and 2, this lets you change the hover and non-hover colors of the menu items. I've used named colors so that you can see easily which CSS rule does what.

    .main-navigation a {
      color: red;
    }
    .main-navigation a:hover, .main-navigation a:focus {
      color: blue;
    }
    
    .main-navigation li li:hover, .main-navigation li li:focus {
      background-color: yellow;
    }
    .main-navigation li li > a {
      color: violet;
    }
    .main-navigation li li > a:hover, .main-navigation li li > a:focus {
      color: lime;
    }

    For #5, I believe this covers it for you. Adjust font size and alignment as desired.

    .wf-active .page .panel-content .entry-title {
      font-size: 120%;
      text-align: center;
    }
  10. Hi thesacredpath, thanks again for your support. The code for the font size and color of the menu is great. Exactly what I need!

    Regarding the other points I found out that your code only works for my welcome page!

    The other pages are not changing if I use your css code - only one thing is correct - it's the syntax: "...margin-bottom: 2em;".

    Do you know how to modify the code regarding font size, text alignment and distance to the top for the title-text?

    Regards
    Fredrik

  11. For the spacing, above the titles, change that rule to this.

    .panel-content .wrap, .site-content {
     padding-top:2em
    }

    Change the font size and alignment rule to this.

    .wf-active .page .panel-content .entry-title, .wf-active .page-title, .wf-active body.page:not(.twentyseventeen-front-page) .entry-title {
     font-size: 120%;
     text-align:center;
    }

    Sorry about missing those. Twenty Seventeen is a bit complex.

  12. Hi,

    thanks - that's it. Great to have such a good support from you.

    I would close this topic regarding this - but I still have two more questions. If you think it's better to open a new topic please tell me...

    Question 1: How can I see the menu content initaly without scrolling?
    If you visit http://www.strietz.de, the menu is at the buttom first - if people click on the menu they will not see the menu content because this is unter the current screen and they have to scroll.... Is it possible to bring my menu to the top initially ? Or any other ideas (perhaps: can the menu open upwards/to the top if there is not enough space under it)?

    Question 2: Can I change the threshold of changing to the "smartphone" format/menu?
    If seems that the menu (and other formats) change to the mobile/smartphone format if the browser window or the screen is smaler than 750 pixels. Is it possible to increase this value? I want the smartphone menu "earlier" - for example at 800 pixels. Is it possible?

    Thanks
    Fredrik

  13. Hi there,

    Question 1: How can I see the menu content initaly without scrolling?

    I've checked the theme, and also asked our theme developers to take a look at things, and the theme is operating as it was designed. The down arrow to the right of the menu is meant to be clicked so that it brings the menu to the top and also so that you can then see the content. Making the submenus expand to the top when it is at the bottom of the screen, but then expand down when the menu is at the top would require some pretty extensive custom Javascript.

    What we can do though is to move the menu to the very top of the screen. See what you think with this. Add this to the very bottom of your custom CSS.

    @media screen and (min-width: 768px) {
    .site-header {
    	display: flex !important;
    	display: -webkit-box !important;
    	display: -moz-box !important;
    	display: -ms-flexbox !important;
    	display: -webkit-flex !important;
    	-webkit-flex-direction: column !important;
    	-moz-flex-direction: column !important;
    	-ms-flex-direction: column !important;
    	flex-direction: column !important;
    	-webkit-box-orient: vertical !important;
    	-moz-box-orient: vertical !important;
    	-ms-box-orient: vertical !important;
    	box-orient: vertical !important;
    }
    .site-header .navigation-top {
    	-webkit-box-ordinal-group: 1 !important;
    	-moz-box-ordinal-group: 1 !important;
    	-ms-flex-order: 1 !important;
    	-webkit-order: 1 !important;
    	order: 1;
      position: fixed;
      top: 0;
      bottom: auto;
    }
    .logged-in .site-header .navigation-top {
    	-webkit-box-ordinal-group: 1 !important;
    	-moz-box-ordinal-group: 1 !important;
    	-ms-flex-order: 1 !important;
    	-webkit-order: 1 !important;
    	order: 1;
      position: fixed;
      top: 32px;
      bottom: auto;
    }
    .site-header .custom-header {
    	-webkit-box-ordinal-group: 2 !important;
    	-moz-box-ordinal-group: 2 !important;
    	-ms-flex-order: 2 !important;
    	-webkit-order: 2 !important;
    	order: 2 !important;
    }
    }

    I've limited this change to screens/windows 768px and wider. Narrower than that the touch device menu activates and things go awry with the above code.

  14. Question 2: Can I change the threshold of changing to the "smartphone" format/menu?

    I'm not seeing a clean way to do this and have it work properly. I can sort of get there, but not entirely.

  15. Thanks for your help!

  16. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic