Support » Theme: Sela » Change sub-menu from uppercase to lowercase

  • Hello,

    I am trying to make the navigation sub-menu items (e.g under Backpacking Bunny, then under The Balkans) show in lowercase instead of uppercase. I had a look at the css, tried replacing uppercase with lowercase then with none for the navigation (main & toggle), nothing worked even after emptying cache. Restored css to normal.

    I tried searching for a solution, but couldn’t find any. Can someone please help?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @mirelaiepurela,

    Please try adding the following CSS for your sub menu:

    .main-navigation ul ul a {
    	text-transform: none;
    }

    none means any capital letters you have typed will still be output. Replacing that with lowercase will remove them completely.

    I hope this helps!

    Thank you, Gemma. I just tried this again. I tried it yesterday, too. It doesn’t change the sub-menu to lowercase 🙁

    Hi @mirelaiepurela,

    Oh! I tested this on a fresh install of Sela and it is working. I noticed you have already made changes to the hover styles on the sub menu, which include the text transformation property — this points to the possibility of conflicting CSS.

    Could you try temporarily removing the menu CSS you have already added?

    I have replaced my style.css with the one from a fresh download of a sela theme. I changed what you said, yet still no changes.

    As for my additional css it is this, so I

    body {
      color: #2c3e50;
      background: #ecf0f1;
    }
    .half {
      float: left;
      width: 100%;
      padding: 0 0em;
    }
    /* Acordeon styles */
    .tab {
      position: relative;
      margin-bottom: 1px;
      width: 100%;
      color: #fff;
      overflow: hidden;
    }
    .tab input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    .tab label {
      position: relative;
      display: block;
      padding: 0 0 0 1em;
      background: #f0606e;
      font-weight: bold;
      line-height: 3;
      cursor: pointer;
    }
    .tab-content {
      max-height: 0;
      overflow: hidden;
      background: #ffffff;
    	padding-left: 0.5em;
    	font-weight: bold;
    	  -webkit-transition: max-height .35s;
      -o-transition: max-height .35s;
      transition: max-height .35s;
    }
    /* :checked */
    .tab input:checked ~ .tab-content {
      max-height: 100vh;
    }
    /* Icon */
    .tab label::after {
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      width: 3em;
      height: 3em;
      line-height: 3;
      text-align: center;
      -webkit-transition: all .35s;
      -o-transition: all .35s;
      transition: all .35s;
    }
    .tab input[type=checkbox] + label::after {
      content: "+";
    }
    .tab input[type=radio] + label::after {
      content: "\25BC";
    }
    .tab input[type=checkbox]:checked + label::after {
      transform: rotate(315deg);
    }
    .tab input[type=radio]:checked + label::after {
      transform: rotateX(180deg);
    }
    

    I even removed my additional css, yet the change in style.css doesn’t work. 🙁

    I have a print screen after adding the original sela style.css, adding your change and removing additional css, but I don’t know how to add it.

    Hi @mirelaiepurela,

    Can you walk me through how you are adding the CSS? I tested it in two ways and they both worked:

    1. On a fresh download of Sela.
    2. Using Chrome Inspector — this can be used to show a preview of how CSS would look and work.

    Did you try commenting out the additional CSS in Customise > Additional CSS except for the code I provided above, first? I’m wondering if it is being compiled into another CSS file rather than style.css — which is why just replacing that file didn’t have any effect.

    • This reply was modified 5 months, 3 weeks ago by  Gemma Evans.
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.