Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

[SOLUCIONADO] Separar menús con "|"

 Estas en el tema de Separar menús con "|" en el foro de WordPress en Foros del Web. Necesitaría separar los distintos campos del menú con el símbolo "|". Saludos....
  #1 (permalink)  
Antiguo 22/04/2018, 14:08
 
Fecha de Ingreso: septiembre-2011
Ubicación: Gran Canaria
Mensajes: 134
Antigüedad: 13 años, 2 meses
Puntos: 1
Separar menús con "|"
Necesitaría separar los distintos campos del menú con el símbolo "|".

Saludos.
  #2 (permalink)  
Antiguo 23/04/2018, 09:17
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Separar menús con "|"
El tema no corresponde a Wordpress.

Agregalos con CSS utilizando el atributo :before o after según sea la conveniencia.
  #3 (permalink)  
Antiguo 29/04/2018, 10:56
 
Fecha de Ingreso: septiembre-2011
Ubicación: Gran Canaria
Mensajes: 134
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: Separar menús con "|"
Este es el menú:

Código HTML: 
Ver original
  1. header {
  2.     background: #fff;
  3.     border-top: 2px solid;
  4. }
  5. /* Base Navigation */
  6. header nav {
  7.     float: left;
  8.     margin: 0 0 0 20px;
  9. }
  10. .navbar {
  11.     border: none;
  12.     -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
  13.     box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1);
  14.     -webkit-border-radius: 0 0 0 0;
  15.     border-radius: 0 0 0 0;
  16.     z-index: 9997;
  17. }
  18. .navbar-default {
  19.     background-color: #fff;
  20. }
  21. .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  22.     color: #5e5e5e;
  23.     background-color: transparent;
  24. }
  25. .navbar-default .navbar-text {
  26.     color: #5e5e5e;
  27. }
  28. .navbar-default .navbar-nav > li > a {
  29.     color: #5e5e5e;
  30. }
  31. .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  32.     background-color: transparent;
  33. }
  34. .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  35.     background-color: transparent;
  36. }
  37. .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
  38.     color: #5e5e5e;
  39.     background-color: transparent;
  40. }
  41. .navbar-default .navbar-collapse, .navbar-default .navbar-form {
  42.     border-color: #e7e7e7;
  43. }
  44. .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  45.     background-color: #fff;
  46. }
  47. .navbar-nav .dropdown-menu  {
  48.     border-top: 2px solid;
  49.     font-size: 13px;
  50. }
  51. .navbar-default .navbar-nav .dropdown-menu > li > a {
  52.     color: #5e5e5e;
  53. }
  54. .navbar-default .navbar-nav .dropdown-menu > .active > a, .navbar-default .navbar-nav .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .dropdown-menu > .active > a:focus {
  55.     text-decoration: none;
  56.     background-color: #fff;
  57.     outline: 0;
  58. }
  59. .navbar-default .navbar-nav .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .dropdown-menu > .disabled > a:focus {
  60.     color: #999999;
  61. }
  62. @media (min-width: 1200px) {
  63.     /* Logo */
  64.     header #logo {
  65.         float: left;
  66.         padding: 20px 60px 20px 0;
  67.         border-right: 1px solid #e1e1e1;
  68.         max-width: 100%;
  69.     }
  70.     /* Navbar */
  71.     .navbar {
  72.         position: relative;
  73.         min-height: 50px;
  74.         margin-bottom: 0;
  75.     }
  76.     .navbar-brand {
  77.         float: left;
  78.         padding: 0;
  79.         font-size: 18px;
  80.         line-height: 20px;
  81.     }
  82.     .navbar > .container .navbar-brand {
  83.         margin-left: 0;
  84.     }
  85.     /* Dropdown */
  86.     .navbar-nav > li > a {
  87.         padding: 32px 20px;
  88.     }
  89.     .logo-lg .navbar-nav > li > a {
  90.         padding: 54px 20px;
  91.     }
  92.     .navbar-nav > li:first-child {
  93.         padding-left: 40px;
  94.     }
  95.     .navbar-nav .caret {
  96.         display: inline-block;
  97.         width: 0;
  98.         height: 0;
  99.         margin-left: 5px;
  100.         vertical-align: middle;
  101.         border-top: 4px solid;
  102.         border-right: 4px solid transparent;
  103.         border-left: 4px solid transparent;
  104.     }
  105.     .navbar-nav .dropdown {
  106.         position: relative;
  107.     }
  108.     .navbar-nav .dropdown-toggle:focus {
  109.         outline: 0;
  110.     }
  111.     .navbar-nav .dropdown-menu {
  112.         position: absolute;
  113.         top: 100%;
  114.         left: 0;
  115.         display: none;
  116.         float: left;
  117.         min-width: 160px;
  118.         padding: 0;
  119.         margin: 0;
  120.         font-size: 13px;
  121.         list-style: none;
  122.         background-color: #ffffff;
  123.         background-color: rgba(255, 255, 255, 0.95);
  124.         color: rgba(255, 255, 255, 0.95);
  125.         border-right: none;
  126.         border-bottom: 1px solid #fff;
  127.         border-left: none;
  128.         border-radius: 0px;
  129.         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  130.         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  131.         background-clip: padding-box;
  132.     }
  133.     .navbar-nav > li > .dropdown-menu {
  134.         margin-top: -1px;
  135.     }
  136.     .navbar-nav .dropdown-menu.pull-right {
  137.         right: 0;
  138.         left: auto;
  139.     }
  140.     .navbar-nav .dropdown-menu .divider {
  141.         height: 1px;
  142.         margin: 9px 0;
  143.         overflow: hidden;
  144.         background-color: #e5e5e5;
  145.     }
  146.     .navbar-nav .dropdown-menu > li > a {
  147.         display: block;
  148.         padding: 10px 20px;
  149.         clear: both;
  150.         font-weight: normal;
  151.         line-height: 1.428571429;
  152.         white-space: nowrap;
  153.         -webkit-transition: all ease-in .1s;
  154.         -moz-transition: all ease .1s;
  155.         -ms-transition: all ease .1s;
  156.         -o-transition: all ease .1s;
  157.         transition: all ease-in .1s;
  158.         border-bottom: 1px solid #e1e1e1;
  159.         background-color: transparant;
  160.         border-right: 1px solid #fff;
  161.         border-left: 1px solid #fff;
  162.     }
  163.     .navbar-nav .dropdown-menu > li:last-child > a {
  164.         border-bottom: 0px;
  165.     }
  166.     .navbar-nav .dropdown-menu > li > a:hover, .navbar-nav .dropdown-menu > li > a:focus {
  167.         text-decoration: none;
  168.         background-color: #fff;
  169.         -webkit-transition: all ease-out .1s;
  170.         -moz-transition: all ease .1s;
  171.         -ms-transition: all ease .1s;
  172.         -o-transition: all ease .1s;
  173.         transition: all ease-out .1s;
  174.     }
  175.     .navbar-nav .dropdown-menu > .disabled > a:hover, .navbar-nav .dropdown-menu > .disabled > a:focus {
  176.         text-decoration: none;
  177.         cursor: not-allowed;
  178.         background-color: transparent;
  179.         background-image: none;
  180.         filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  181.     }
  182.     .navbar-nav .open > .dropdown-menu {
  183.         display: block;
  184.     }
  185.     .navbar-nav .open > .dropdown-menu, #top-header .open > .dropdown-menu {
  186.         animation-name: fadeIn;
  187.         animation-duration: 0.4s;
  188.         animation-iteration-count: 1;
  189.         animation-timing-function: ease-out;
  190.         -webkit-animation-name: fadeIn;
  191.         -webkit-animation-duration: 0.4s;
  192.         -webkit-animation-iteration-count: 1;
  193.         -webkit-animation-timing-function: ease-out;
  194.         -moz-animation-name: fadeIn;
  195.         -moz-animation-duration: 0.4s;
  196.         -moz-animation-iteration-count: 1;
  197.         -moz-animation-timing-function: ease-out;
  198.     }

Y esto lo que he añadido:


Código HTML: 
Ver original
  1. .navbar-nav > li > a::before  {
  2.     margin-right: 10px;
  3.     margin-left: 10px;
  4.     content: " | ";
  5. }
  6.  
  7. .navbar-nav > li > a::after {
  8.     content: "";    /* el último no incluye separador */
  9. }
  #4 (permalink)  
Antiguo 29/04/2018, 20:39
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Separar menús con "|"
compañero @juancarsantana haganos el favor de leer las politicas del foro, no se permite publicar mas de una vez el mismo topico.}
http://www.forosdelweb.com/f53/separ...s-con-1161398/

Si no haz logrado tu cometido y aun presentas un problema expresalo aquí mismo, con el código que haz mostrado anteriormente no haz mencionado ningún problema, no haz preguntado nada, solo lo pegaste y ya esta.
No somos adivinos y así como lo pusiste hemos dado por sentado que te ha funcionado., quizás no es la mejor forma o vemos algo que no nos cuadra pero si a ti te funciona no hay nada que decir.

Veo que abriste otro tópico para lo mismo e igual no dices que te falla que necesitas ni nada., por favor expresate.
  #5 (permalink)  
Antiguo 02/05/2018, 06:56
Avatar de zanguanga
Moderadora
  
Fecha de Ingreso: julio-2009
Ubicación: España
Mensajes: 1.686
Antigüedad: 15 años, 5 meses
Puntos: 429
Respuesta: Separar menús con "|"
Tal vez algo así también pueda servirle a alguien que esté buscando lo mismo.


Código CSS: 
Ver original
  1. .navbar-nav > li > a {
  2.     border-right: 1px solid #000000;
  3. }
  4.  
  5. .navbar-nav > li:last-child > a {
  6.     border-right: 0;
  7. }

Cita:
Iniciado por juancarsantana Ver Mensaje


Código HTML: 
Ver original
  1. .navbar-nav > li > a::before  {
  2.     margin-right: 10px;
  3.     margin-left: 10px;
  4.     content: " | ";
  5. }
  6.  
  7. .navbar-nav > li > a::after {
  8.     content: "";    /* el último no incluye separador */
  9. }
__________________
Mi blog personal | Mi G+

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:48.