0
Welcome Guest! Login
0 items Join Now

SOLVED Splitmenu with icons problem

Last Post
Search Topic

  • SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • Hi, i have a problem with display Splitmenu with icons. When I place a icon to the menu item, it will show up, but menu text is displayed on second line under the icon and it is itallic.
      You can see it on my website www.pilsedu.cz in that color boxes. I places icon to the left top menu item "Projekty".

      I'd like to have the icon at the same line with text and normal text, not <i>.

      Could someone help me with that? I have tried find this in code, but no luck at all.

      Thanks, Martin
    #1120940
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • Use this code...
      .menu i:before {
    display: inline;
    padding-right: 5px;
}

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1120941

  • Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • Thanks Mark, its working with Chrome. But not in IE. I have IE11 and tried clear all cache and history and still nothing. I put the css lines in master IE specific css files and still nothing.
      And another problem, the code is for <i> so font is still in italic and I rather see the font in normal style.
    #1120951
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • also add:
      .menu i {
    font-style: normal;
    display: inline;
}

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1120975

  • Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • Ok, I figured it out. It's working now.

      But last thing I want to change is put some space between icon and menu text. Could you help me with that too?

      Regards, Martin
    #1120993
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • change the padding from 5px to a larger number in the CSS I gave you.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1120995

  • Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • I have already tried this, but seems that padding dont do anything at all.
    #1121012
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • You've removed some of the code!

      You should have this...
      .menu i:before {
    display: inline;
    padding-right: 5px;
}
.menu i {
    font-style: normal;
    display: inline;
}
      I did say to "add" the second piece of CSS I gave you.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1121015

  • Re: SOLVED Splitmenu with icons problem

    Posted 9 years 9 months ago
    • Oh sorry I read it wrong. It working great. Thanks for your time and your help.

      Regards, Martin
    #1121023

Time to create page: 0.042 seconds