Menu Header not displaying correctly

joshualee66

why is my menu item stop displaying normally once i use it as a Menu Heading

Ninja

joshualee66
Hi
Add this code in /css/custom.css file

.t3-topnav .nav > li > .nav-header {
    color: #333333;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    font-family: "Roboto Condensed","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0 40px;
    height: 48px;
    line-height: 48px;
    border-radius: 0;
    border-right: 1px solid #e5e5e5;
    padding: 17px;
}

.t3-topnav .nav > li > .nav-header:hover, .t3-topnav .nav > li > .nav-header:focus {
    color: #fff;
    background-color: #111111;
    border-color: #111111;
}

Regards

joshualee66

Ninja

thanks for the prompt response.
Display ok now except a dropdown indication arrow missing when there are submenu .

Ninja

joshualee66
Hi
Try this code

.t3-topnav .nav > li > .nav-header:before {
    content: "\f107";
    font-family: FontAwesome;
    font-style: normal;
    float:left;
    margin-left:10px;
}

joshualee66

Ninja

Hi, its different from the original menu.
I added a sample under magazine for u to take alook

https://prnt.sc/p7qczf

Ninja

joshualee66
Hi
the caret style not work for heading type.
I customized the code for you to get a similar look


.t3-topnav .nav > li > .nav-header:before{content: "";border-top-color: #0c2164;border-bottom-color: #0c2164;margin-left: 5px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);border-width: 6px;display: inline-block;width: 0;height: 0;margin-left: 1px;vertical-align: middle;border-top: 6px dashed;border-right: 6px solid transparent;border-left: 6px solid transparent;}

Regards

joshualee66

Ninja

thanks.

But arrow is not following the old ones. its on the left. I hope u all make the change to the new version of template as this is clearly a bug.

https://prnt.sc/p85l7o

Ninja

joshualee66
Hi
I raised the thread report to development team for further checking and fix for next update of the template.

Regards

saguaros

joshualee66

Updated this css into 'custom.css' file on your site:

/*Fix menu header issue*/

.t3-topnav .nav > li > span {
	color: #333333;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    font-family: "Roboto Condensed","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0 40px;
    height: 48px;
    line-height: 48px;
    border-radius: 0;
    border-right: 1px solid #e5e5e5;
    display: inline-block;
}

.t3-topnav .nav > li > span:hover {
  color: #fff;
  background-color: #111111;
  border-color: #111111;
}

.t3-topnav .nav > li span:before {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -1px;
  border-bottom-color: #e5e5e5;
  margin-left: 5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 6px dashed #e5e5e5;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.t3-topnav .nav > li .caret {
  position: absolute;
  right: -4px;
  bottom: -1px;
  border-top-color: #e5e5e5;
  border-bottom-color: #e5e5e5;
}

Kindly check.

joshualee66

saguaros

Looks ok now