Change fontsize in menu in customizer

  • Resolved christinas

    (@christinas)


    11 years, 2 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!

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.

    Thread Starter christinas

    (@christinas)

    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?

    Thread Starter christinas

    (@christinas)

    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

    Thread Starter christinas

    (@christinas)

    thank you ??

    https://pastebin.com/sEJtb830

    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.

    Thread Starter christinas

    (@christinas)

    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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    https://codex.www.ads-software.com/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?

    Thread Starter christinas

    (@christinas)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 https://www.filedropper.com ) and provide a link here.

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

    Thread Starter christinas

    (@christinas)

    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.

Tags