WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Change fontsize in menu in customizer (21 posts)

  1. christinas
    Member
    Posted 10 months ago #

    I cant seem to change the fontsize in the headermenu in costimizr. I want i lager and at the right. All help is appriciated!

  2. Jesin A
    Member
    Posted 10 months ago #

    Open Appearance > Customize and enter the following code into the Custom CSS box

    .navbar .nav > li > a {
      font-size: 16px;
    }

    Change the value 16 to whatever you prefer.

  3. christinas
    Member
    Posted 10 months ago #

    Thank you, but Ive already tried that in custom css an also change grey.css in child theme - it just doesnt work and i dont get it!
    I type it in google chrome - and itappears as it will work.

    it seems like I haft to put in some additional code

  4. Jesin A
    Member
    Posted 10 months ago #

    It could be CSS overriding each other. Can you share your site's URL.

  5. rdellconsulting
    Member
    Posted 10 months ago #

    Link to your site?

  6. christinas
    Member
    Posted 10 months ago #

    sorry, its still local with free MAMP.

    i have put this additional code into custom css customizr:

    .social-block a { text-shadow: none; }
    
    .navbar .navbar-inner {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
    background: none;
    }
    
    #div.social-block span5{
    align: right;
    }
    
    #main-wrapper {
    margin-top: 5px;
    margin-bottom: 5px;
    }
    
    header.tc-header {
    border-bottom: 6px solid #8196af;
    border-top: 6px solid #8196af;
    }
    #main-wrapper{
    color: #333;
    }
    
    .btn-primary {
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #002857;
    background-image: -moz-linear-gradient(top, #8196af, #002857);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8196af), to(#002857));
    background-image: -webkit-linear-gradient(top, #8196af, #002857);
    background-image: -o-linear-gradient(top, #8196af, #002857);
    background-image: linear-gradient(to bottom, #8196af, #002857);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc' , endColorstr='#ff005580' , GradientType=0);
    border-color: #0002857 #0002857 #0002857;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #002857;
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
    color: white;
    background-color: #002857;
    *background-color: #002857;
    }
    .featurette-divider {
    margin: 0px 0;
    clear: both;
    }
    hr {
    margin: 20px 0;
    border: 0;
    border-top: 0px solid #EEE;
    border-bottom: 0px;
    }
    footer#footer {
    border-top: 12px solid #8196af;
    }
    a;
    a:hover,
    a:focus {
    color: #002857;
    text-decoration: underline;
    }
    .format-icon::before {
    display:none;
    }
    #main-wrapper {
    color: #4d555b;
    }
    h1,h2,h3,h4{
    color: #002857;
    }
    .carousel-control {
    display: none;
    }
    a {
    color: #8196AF;
    }
    #right.widget-area {
    padding-left: 10px;
    }
    .navbar .nav > li > a {
      font-size: 20px;
    }.navbar .nav > li > a {
      padding: 10px 25px 10px 25px;
      font-size: 20px;
    }
    .navbar .nav > li > a:first-letter {
      font-size: 20px;
    }
    
    .social-block a { text-shadow: none; }
    
    .navbar .navbar-inner {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
    background: none;
    }
    
    #div.social-block span5{
    align: right;
    }
    
    #main-wrapper {
    margin-top: 5px;
    margin-bottom: 5px;
    }
    
    header.tc-header {
    border-bottom: 6px solid #8196af;
    border-top: 6px solid #8196af;
    }
    #main-wrapper{
    color: #333;
    }
    
    .btn-primary {
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #002857;
    background-image: -moz-linear-gradient(top, #8196af, #002857);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8196af), to(#002857));
    background-image: -webkit-linear-gradient(top, #8196af, #002857);
    background-image: -o-linear-gradient(top, #8196af, #002857);
    background-image: linear-gradient(to bottom, #8196af, #002857);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc' , endColorstr='#ff005580' , GradientType=0);
    border-color: #0002857 #0002857 #0002857;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #002857;
    /* Darken IE7 buttons by default so they stand out more given they won't have borders */
    
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary.disabled,
    .btn-primary[disabled] {
    color: white;
    background-color: #002857;
    *background-color: #002857;
    }
    .featurette-divider {
    margin: 0px 0;
    clear: both;
    }
    hr {
    margin: 20px 0;
    border: 0;
    border-top: 0px solid #EEE;
    border-bottom: 0px;
    }
    footer#footer {
    border-top: 12px solid #8196af;
    }
    a;
    a:hover,
    a:focus {
    color: #002857;
    text-decoration: underline;
    }
    .format-icon::before {
    display:none;
    }
    #main-wrapper {
    color: #4d555b;
    }
    h1,h2,h3,h4{
    color: #002857;
    }
    .carousel-control {
    display: none;
    }
    a {
    color: #8196AF;
    }
    #right.widget-area {
    padding-left: 10px;
    }
    .navbar .nav > li > a {
      font-size: 20px;
    }
    .navbar .nav > li > a:first-letter {
      font-size: 20px;
    }

    nothing happended here, so i tried change grey.css in the child theme, but nothing

  7. Jesin A
    Member
    Posted 10 months ago #

    I tried the entire CSS code by placing it in the custom CSS box on a local wordpress installation and it does work fine.

    Can you share the HTML code of the front page as it is displayed on your browser. Please don't paste it here use pastebin.com

  8. christinas
    Member
    Posted 10 months ago #

  9. Jesin A
    Member
    Posted 10 months ago #

    The > symbols are HTML encoded to &gt, I don't know if this is done by pastebin or this is how it is saved.

    Open the source code from the browser and check lines 92 and 95 it should look like

    .navbar .nav > li > a {
    font-size: 30px;
    }
    .navbar .nav > li > a::first-letter {
    font-size: 30px;
    }

    and NOT

    .navbar .nav &gt li &gt a {
    font-size: 30px;
    }
    .navbar .nav &gt li &gt a::first-letter {
    font-size: 30px;
    }

    And there are two semicolons on line 95 before first-letter check that too.

  10. christinas
    Member
    Posted 10 months ago #

    isnt just &gt the same as >?

    i cant change it - it is just > in the code - what additional can i put in to make it right?

  11. Andrew
    Forum Moderator
    Posted 10 months ago #

    You can't put these symbols into the "Custom CSS" part of the dashboard for security reasons. You'll need to create a Child Theme and work from that Child Theme style.css file.

    http://codex.wordpress.org/Child_Themes

  12. Jesin A
    Member
    Posted 10 months ago #

    If you are using a > in HTML you must enter it as &gt but as for the CSS it should be > only.

    Does it show up as > when you view the source code on your browser?

  13. christinas
    Member
    Posted 10 months ago #

    ok
    I still dont get it. ive remmoved the code from custom css.
    i have a child theme, which the page is using and ive put the code in there in style.css
    ive also changes the grey.css

    it doesnt work, it seems my changes doesnt show..

  14. Andrew
    Forum Moderator
    Posted 10 months ago #

    Have you cleared your browser's cache?
    Do you have a caching plugin enabled?

  15. Jesin A
    Member
    Posted 10 months ago #

    If possible save the entire home page (File > Save As) including the CSS files, zip it, upload it somewhere (like http://www.filedropper.com ) and provide a link here.

    Without looking at your site we would be beating around the bush.

  16. christinas
    Member
    Posted 10 months ago #

    ive cleared my cashe, and Ive figured out that the grey.css in the original customizr-theme overrides the childtheme - which is the one ive installed.

    any tips??

  17. Andrew
    Forum Moderator
    Posted 10 months ago #

  18. Jesin A
    Member
    Posted 10 months ago #

    Using the Custom CSS box in Appearance > Customize inserts the code in the <head> which overrides external stylesheets.

    In addition use !important

    .navbar .nav > li > a {
    font-size: 30px !important;
    }
    .navbar .nav > li > a::first-letter {
    font-size: 30px !important;
    }
  19. ElectricFeet
    Member
    Posted 10 months ago #

    Ive already tried that in custom css an also change grey.css in child theme - it just doesnt work and i dont get it!

    You should not have a "grey.css" in your child theme. Your child theme should have "style.css" only and should include these lines at the top:

    /*
    Theme Name: customizr-child
    Template: customizr
    */
    
    @import url("../customizr/style.css");
  20. christinas
    Member
    Posted 9 months ago #

    Hi
    It seemed like some code was double up, when I went trought it and sorted it out it worked fine.

    thank you guys :)

  21. christinas
    Member
    Posted 9 months ago #


  22. andherethewheel
    Member
    Posted 7 months ago #

    Hi, hope its ok to post on the tail end of this but I have Customizer with menu issues. Not so much the text size its the fact that the menu bar is so massize compared to the appropriately sized text and therefore cuts off the bottom of the main screen. Is there anyway to modify that?

    My site is: http://66.147.244.80/~andheret/ (hidden draft site at present)

    Thanks in advance for any help.

  23. chappie
    Member
    Posted 7 months ago #

    I can't link to it because themesandco seems to be down right now but there are Snippets there to remove the menu box and shading completely -- although your problem is caused by the size of your logo, which at 405px deep is pushing everything else down. Try resizing the logo.

Reply

You must log in to post.

About this Theme

About this Topic