Hey there eslunite,
How are you doing today?
You can use media queries for that, by using that you can add styles only to specific resolutions. So for example if you already know what needs to be changed you can add the following:
@media screen and (min-width: 1024px) {
selector {
font-size: 22px;
}
}
Replace dummy selector with the one you were using. This will change font size only on resolutions larger then 1024px in width.
Hope this helps 🙂
Cheers,
Bojan
thanks for the reply
I added .nav-text this is a guess as I am not really good at this
Nothing changed…
I can change the text height in the
/* common : nav
/* ------------------------------------ */
.nav-container { background: #888; z-index: 99; position: relative; }
.nav-toggle { display: none; background: #777; cursor: pointer; float: right; height: 50px; width: 60px; color: #fff; text-align: center; }
.nav-toggle i { font-size: 29px; padding: 10px 0; }
.nav-text { display: none; float: right; font-size: 16px; line-height: 24px; padding: 13px 20px; }
.nav li > a:after,
.nav > li > a:after { font-family: FontAwesome; display: inline-block; }
@media only screen and (min-width: 720px) {
.nav-wrap { height: auto!important; }
/* common */
.nav { font-size: 0; position: relative; }
.nav li a { color: #ccc; display: block; line-height: 20px; }
/* dropdown arrows */
.nav li > a:after { content: "\f0da"; float: right; opacity: 0.5; }
.nav > li > a:after {content: "\f0d7"; float: none; margin-left: 6px; font-size: 14px; line-height: 1.2em; }
.nav li > a:only-child:after {content: ""; margin: 0; }
#footer .nav li > a:after { content: "\f0da"; }
#footer .nav > li > a:after { content: "\f0d8"; }
#footer .nav li > a:only-child:after { content: ""; }
/* level 1 */
.nav > li { font-size: 16px; border-right: 1px solid #999; display: inline-block; position: relative; }
.nav > li > a { padding: 15px 14px; }
.nav > li > a:hover,
.nav > li:hover > a { background: #777; }
.nav li > a:hover,
.nav li:hover > a,
.nav li.current_page_item > a,
.nav li.current-menu-item > a,
.nav li.current-menu-ancestor > a,
.nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
.nav li:hover > ul { display: block; }
.nav ul { display: none; background: #777; position: absolute; left: 0; top: 50px; width: 180px; padding: 10px 0; z-index: 2; -webkit-transform: translateZ(0);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.15);
box-shadow: 0 2px 2px rgba(0,0,0,0.15); }
.nav ul li { font-size: 14px; position: relative; display: block; padding: 0; }
.nav ul li a { padding: 10px 20px; }
.nav ul li:last-child { border-bottom: 0!important; }
/* level 3 */
.nav ul ul { position: absolute; top: -10px; left: 180px; }
}
@media only screen and (max-width: 719px) {
.nav { font-weight: 600; }
.nav-container { text-transform: none; }
.nav-toggle,
.nav-text { display: block; }
.nav-wrap { position: relative; float: left; width: 100%; height: 0; overflow: hidden; }
.nav-wrap.transition {
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease; }
.expand .nav-wrap { height: auto; }
/* iphone fix */
.safari .nav-wrap.transition { -webkit-transition: none; transition: none; }
/* common */
.nav { float: left; width: 100%; }
.nav li a { line-height: 20px; display: block; padding: 8px 20px; }
.nav li li a { padding-left: 15px; padding-right: 15px; }
/* dropdown arrows */
.nav li > a:after { content: '\f0d7'; opacity: 0.5; margin-left: 6px; }
.nav > li > a:after { content: '\f0d7'; font-size: 14px; }
.nav li > a:only-child:after { content: ''; }
/* level 1 */
.nav > li { font-size: 15px; }
.nav li > a:hover,
.nav li.current_page_item > a,
.nav li.current-menu-item > a,
.nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
.nav ul { display: block!important; margin-left: 40px; }
.nav ul li { font-size: 13px; font-weight: 300; }
.nav ul li a { padding-top: 6px; padding-bottom: 6px; }
}
I change some values in here to change the font size but I lose the menus on mobile devices after I make the font 22
can you see where and what I can change to make this work?
Hey again,
Not really sure what’s wrong there, can you please let me know what exactly are you trying to change and post link to your site where I can see this so I can take a look.
Best regards,
Bojan
ok thanks
my site
You can see the header has a menu (Fixed) at the top and one at the bottom of the header (not fixed) both are green
The font I think is 16, too small so I want to increase the font to 22 for both menus and their sub levels…
I can do it buy changing the font size in the css but I must be changing the wrong setting because when I view the site on my mobile phone the two top menus have gone.
Thanks
Hey again,
Can you please try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin:
http://wordpress.org/plugins/simple-custom-css
@media only screen and (min-width: 720px) {
#nav-topbar .nav li a, ul#menu-bottom-header-menu li a {
font-size: 22px;
}
}
This should change the font size for both navigation without affecting smaller resolutions.
If the code doesn’t work please keep it added and let me know so I can take a look.
Cheers,
Bojan
who are you people?
You guys that help out here are truly awesome
Thanks for your help and time
