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!

    Thread Starter The Travel Bunny

    (@mirelaiepurela)

    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?

    Thread Starter The Travel Bunny

    (@mirelaiepurela)

    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 6 years, 1 month ago by Gemma Evans.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change sub-menu from uppercase to lowercase’ is closed to new replies.