Thanks once again Josue. That does resolve the left justifying issue, but the menu drops into 2 rows (not visible over slider photo) on mobile devices (viewing on iPhone 5). I tried bumping the font-size down to 11px, and also shortened the menu titles, but neither helped. \
Let me know if this is an easy fix.
Ryan
Try changing the code to:
.container #advanced_menu_toggle, #advanced_menu_hide {
display: none !important;
}
@media only screen and (max-width: 767px) {
.main_menu, #header_main_alternate, #avia-menu {
display: block !important;
}
#header_main_alternate .container{
width: 365px;
}
#avia-menu a{
font-size: 12px !important;
}
.responsive .logo {
float: none !important;
margin: 0 auto !important;
right: 0 !important;
left: 0 !important;
width: 104px;
}
}
Best regards,
Josue
Hi!
You can use this for the mobile menu font:
#mobile-advanced a, #mobile-advanced .mega_menu_title {
font-size: 20px;
padding: 13px 28px;
}
Cheers!
Ismael
Hi!
Thank you for the update.
Please add this to prevent the menu from covering the logo:
@media only screen and (max-width: 1100px) {
.av-main-nav > li > a {
font-size: 12px;
padding: 0 7px;
}
}
Regards,
Ismael
Hey!
Thank you for the update.
No, it is the same size with the regular font. Try to add this on Quick CSS:
strong, b {
font-weight: normal;
font-size: inherit !important;
color: white !important;
}
You’ll see that fonts enclose with strong tags have the same size with the regular fonts.
Cheers!
Ismael
Gravity Forms
I’ve tried creating this same effect – except for a centered logo (to show the phone number on the left).
I added this:
div.phone-info {
left: 0;
position: relative;
top: 85px;
}
.phone-info span { font-size: 24px;
color: #ffffff; }
@media only screen and (max-width: 480px) {
.phone-info span {
font-size: 18px;
}}
#header_meta {
height:0px;
min-height: 0;
}
How do I completely remove the top line since it is not needed? “header_meta”
I tried display:none – but that gets rid of the phone number too that I just added.
For now I moved it all back to the top bar being that with the shrinking logo it ends up on top of the menu. Ideally I want the Phone Number to the left of the logo that will respond appropriately when the logo shrinks upon scrolling – and the facebook icon to the right of the logo.
Thanks!
-
This reply was modified 11 years, 9 months ago by
ewingmh.
Hey Ryan!
Try adding this code to the Quick CSS:
.container #advanced_menu_toggle, #advanced_menu_hide {
display: none !important;
}
.main_menu, #header_main_alternate, #avia-menu {
display: block !important;
}
@media only screen and (max-width: 767px) {
#header_main_alternate .container{
width: 365px;
}
#avia-menu a{
font-size: 12px !important;
}
}
Cheers!
Josue
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 480px) {
.responsive.html_header_top #header_main .social_bookmarks {
right: 0 !important;
}
.responsive.html_header_top #header_main .social_bookmarks li a{
font-size: 14px;
}
#mobile-advanced li a{
font-size: 18px;
}
}
Modify as needed.
Cheers!
Josue
Hi Damian!
Please add following code to Quick CSS
1-
@media only screen and (max-width: 479px) {
.responsive.html_header_top #header_main .social_bookmarks {
display: block;
}}
2-
#top .social_bookmarks li a { font-size: 18px; }
Regards,
Yigit
Hey!
You can decrease the font size of phone number on mobile by adding following code to Quick CSS field in Enfold theme options under General Styling tab
@media only screen and (max-width: 480px) {
.phone-info span {
font-size: 18px;
}}
Cheers!
Yigit
Hello
unfortunately it does not work as it should.
The color inherit sets the font color to white, but the size is fine then.
If i remove color inherit or set it to #1c476f, the size is again messed up.
How could it be, that the size of the font is controled trough the “color:” attribute ?
-
This reply was modified 11 years, 9 months ago by
SonicCube.
Hey rhysbowen!
1- Can you post the link to your website and post a screenshot and show how you would like it to look?
2- Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
div.slide-entry-excerpt.entry-content { font-size: 19px; }
Cheers!
Yigit
Hey felipemillan!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
@media only screen and (max-width: 480px) {
h1.av-special-heading-tag {
font-size: 30px!important;
}}
Best regards,
Yigit
Hi, I have problems with responsive fonts

I set the fonts to 60px for the header but the responsive site do now resize and looks really bad :-(
Can you help me?
Hi!
Please try adding following code to Quick CSS
strong, b {
font-weight: bold!important;
font-size: inherit!important;
color: inherit!important;
}
Best regards,
Yigit
Hello
Thanks for your answer.
It might be the same font, but not the same size or something. It did look different in previous versions. Exactly the same as the default font set in the admin panel, just bold and colored.

Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
div.slide-entry-excerpt.entry-content {
color: red;
font-size: 19px;
}
Best regards,
Yigit
H,
I inset body p { font-size: 50px; } to the QUick Css and still no change to the size of the text, any idea? By the way I am using an RTL wordpress (Hebrew)
Thx
Hey elad0708!
Please try following one
body p { font-size: 24px; }
Best regards,
Yigit
Hey onegirlrtw!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#top label {
font-weight: normal;
font-size: 18px;
}
Cheers!
Yigit
2 things please:
One: How can i change the style of the ‘submenu’. When the cursor goes over ‘product’ on the following page, the sub menu is hire and horizontal. I’d like it smaller and vertical please.
Two: I want to use a content slider for the text at the top. What short code do I need to include to change the font size and color please in the content sliders.
Thanks in advance…
Hi,
I saw in some post the isnstrucions to change the font size. But when I include this code (body {
font-size: 33px;
})
to the quick Css I dont see any cahnge what am I doing wrog?
Thx
Hello!
I would like to increase the size of the field names in the contact form and also change to normal weight (not bold).
Thanks so very much. It works like a dream. I changed the font size to 14 and it still renders fine on all the devices. Thank you!
Hey!
Try adding this code to the Quick CSS:
#main .container_wrap .container main, #main .container_wrap .container {
max-width: 800px;
}
@media only screen and (max-width: 989px) {
.avia-menu-text {
font-size: 11px !important;
}
}
Cheers!
Josue
Hi!
If you are using a shortcode then simply add the custom_class=’alignleft’ attribute at the end of each button, like:
[av_button label='Click me' link='manually,http://' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' custom_class='alignleft']
Cheers!
Josue
Basically, I’m looking for a way to elongate the main navigation bar just a little so it doesn’t drop down on mobile devices. I set the font size to 14 and that seems to work ok, but I’d rather have a little larger font size, maybe 17 or 18. Let me know if this can be done. Thanks.
on this page:
http://theflyingrug.com/new/contact-us-2/
The social icons should be the other way around.
what am I doing wrong in the shortcode, or is there a better way to line them up with a little space in between?:
[av_button label='send mail' link='manually,http://mailto: (Email address hidden if logged out) ' link_target='_blank' color='custom' custom_bg='#b8b5af' custom_font='#ffffff' size='small' position='left' icon_select='yes' icon='ue805' font='entypo-fontello'] [av_font_icon icon='ue8f5' font='entypo-fontello' style='' caption='follow us' link='manually,https://www.facebook.com/pages/The-Flying-Rug/517874874980127' linktarget='_blank' color='#b8b5af' size='36px' position='left'][/av_font_icon]
thanks