Support » Theme: Customizr » Change fontsize in menu in customizer

  • Resolved christinas

    (@christinas)


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

Viewing 15 replies - 1 through 15 (of 22 total)
  • 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.

    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

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

    Link to your site?

    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

    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

    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.

    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?

    Moderator Andrew Nevins

    (@anevins)

    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

    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?

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

    Moderator Andrew Nevins

    (@anevins)

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

    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.

    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??

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Change fontsize in menu in customizer’ is closed to new replies.