This doesn’t work. Seems the font size is inline. Heres a example:

<p class=”ls-l” style=”top:47%;left:50%;text-align:center;padding-right:auto;padding-left:auto;font-family:Lato;font-size:21px;line-height:25px;color:#ffffff;white-space: nowrap;”>This is a test</p>

Do you know if theres another way?

Thanks Vinay! Here you go.

Again the icon font I want to use is lineicons9 => ue800 and the color is #808080 in size of 24×24

Thank you Vinay, I tried inputting this code for retina devices in my quick css with this media query. The problem is that when I enlarge the size of the image for retina devices, it also enlarges the size of the icon within the box (which I don’t want) because it ends up being too large. (See images)

I think the pixelation problem has to do with me scaling down the image so small and that’s why it is showing up pixelated on retina devices. I already have this custom icon uploaded to my theme in the Iconfont Manager, can’t I just access this icon this way. That way, when the icon is scaled down, it will still stay retina and look great on my retina devices since they are .svg files. I already have this icon used on another page on my theme and it shows up retina quality. The color I need the icon is #808080 and size of 24×24 I feel like it would be easier to do it this way. The icon info is below. Can this be done? Thanks for all your help!

( 'font' =>'lineicons9', 'icon' => 'ue800');

Hey Yigit,

thanks for the link. I followed all the instructions, but the last one is not very precise “The code can now be included in the beginning of the sites stylesheet and referenced as any standard font would be. It is important to include some additional fonts in case for some reason the browser is unable to display the local one.”

Where do I post the CSS code – in the main theme in
-Base CSS
-Custom CSS
– The child theme in style.css ?

Also – once this is done – will all the fonts automatically appear in the one I uploaded?

And I still can’t save ANY changes to the theme in other languages, e.g. change the font size, or anything in the footer. I can only save changes in English, all other languages won’t save!!!

Thanks,
Julia

Hello,

Thank you for such a quick response, however, after adding the code you suggested and making sure the > sign did not convert, I am still unable to modify then main menu font size. Also, the horizontal lines remain under each menu heading. I have also tried changing the font size under the Enfold theme option > Advanced Styling and it has no effect. I’m not sure what I could be doing wrong!

HI,

I removed the code that you listed above. What will be the next step to reduce the menu font size?
And how can I remove the grey horizontal lines below each menu heading?

Thank you!

I used this code:
@media only screen and (max-width: 989px) {
.html_mobile_menu_tablet .main_menu, .html_mobile_menu_tablet #header_main_alternate, .responsive #header .main_menu ul, #top #menu-item-search { display: block; }
.av-main-nav li { display: none; }}
@media only screen and (max-width: 990px) {
li#menu-item-search>a { font-size: 24px!important; }
nav.main_menu { float: right; margin-right: 15%; }}
@media only screen and (max-width: 990px) and (min-width: 500px) {
nav.main_menu { margin-right: 12% !important; }}

and the search icon appear but the hamburger is gone, and on smaller screens the search disappear again and the hamburger come back…

Actually, perhaps you could assist me with my solution. I have instead, set each category up in a different portfolio on separate pages. I have then added a widget area in the advanced layout builder, and added a custom menu to this widget area, allowing the user to click between each category almost as they could before with the sorter, just doesn’t look quite as nice ;)
I made some tweaks to the css so that it would display how I wanted it to, (see below), but my remaining challenges are:
1: the “currently active” menu item drops down so that it is no longer in line with the rest – how do I fix this?
2: this menu does not work for smaller mobile devices, it just disappears off the page. I don’t think its necessary to show it at all on smaller devices, instead they could just view the entire portfolio – so how do I make it disappear for the smaller mobile size?

These are the changes I have made so far to css for menu…

/*CHANGES TO PORTFOLIO-SORTING MENU WIDGET*/

#top .widget_nav_menu ul {
    display: -webkit-inline-box;
    font-size: 11px;
    letter-spacing: 0.5px;
    font-family: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.main_color a {
    color: #808080;
}

.entry-content-wrapper li {
    margin-right: 1.5em;
    margin-left: 0em;
}

.widget_nav_menu .current-menu-item>a, .widget_nav_menu .current_page_item>a {
    color: #ab860c;
}

THANKS!!

hello, thank you for helping.

everything works great, but it doesn’t change the color of the text.

here is my css:

.phone-info {
text-align: center;
font-size: 14px;
width: 100%;
color:#a2c138;
}

Hey Vinay,

thank you for your reply.

1. I removed the following code from Quick CSS (this makes the breadcrumbs showing up to the left)

.title_container .breadcrumb {
right: auto;
left: 0;
font-size: 13px;
}

That’s what was messing up the breadcrumbs when using transparent header! BUT, the problem I have now when removing the a/m code is, that the breadcrumbs are showing up to the right instead of to the left.

2. Also, still I have the problem when changing permalink settings from „portfolio-item“ to „projekte“ In dashboard settings, it messes up second page of project archive page and leads to 404!

I send you the login details etc. per private message. Please kindly help resolving these two probs. Thank you in advance.

Cheers
LeUP

• This reply was modified 10 years, 3 months ago by LeUP.

Ah…it’s the H3 that controls that title size. Thank you!

Is it possible to add additional icon characters to this tool? I understand that Enfold includes Entypo icons. Can I add to it Pixeden or Font Awesome to the tool?

Hi Yigit,
code worked partially. It did not correct the font size of the custom menu widget, as you can see at the attached image.
Maybe its tag is not “p”.
Any idea?
Thanks again for your GREAT support!