How do I code access to the built-in UI of a CPT when it’s placed as submenu of another CPT that is protected by role?

I am toying around with WordPress capabilities, and having some difficulty understanding where I am going wrong. Right now, I have an admin menu that appears for all administrators with STUDENTS as a submenu of SCHOOL: each of those link to http://example.com/wp-admin/edit.php?post_type=student. (When the user is in the HEADMASTER role, the link to the built-in UI for TEACHER appears and SCHOOL mimics its link). So far, all is well.

The bump in the road is when a non-HEADMASTER administrator clicks either SCHOOL or STUDENTS, the error “Sorry, you are not allowed to access this page” appears. (As expected, when that same admin accesses http://example.com/wp-admin/edit.php?post_type=teacher, the errors “You need a higher level of permission” and “Sorry, you are not allowed to edit posts in this post type” appear.) The issue is that the STUDENTS built-in UI is not accessible to all administrators. (As expected, there are no problems for HEADMASTERs.) How can this be resolved in such a way as to give all site admins access to STUDENTS and only HEADMASTERs access to TEACHERS while at the same time preserving the layout and functionality of the admin menu and built-in UI?

What I’ve Tried: When the 'show_in_menu' => 'edit.php?post_type=teacher' line is removed from the STUDENTS CPT, everything works as expected but STUDENTS becomes a top-level menu item instead of SCHOOL. I tried putting TEACHERS as a sub-menu item as STUDENTS, but SCHOOL does not change its link when the user is in the HEADMASTER role (also the ordering of TEACHERS and STUDENTS is backwards). I also tried add_menu_page() for SCHOOL and adding the slug returned for the show_in_menu argument of the TEACHERS and STUDENTS register_post_type args, respectively, but that didn’t work because it created a page instead of forwarding to the appropriate built-in UI.

 class School {     public static function init() {         add_action('init', array(__CLASS__, 'register_cpt'));         add_action('init', array(__CLASS__, 'add_role'));         add_action('admin_menu', array(__CLASS__, 'modify_menu'));     }      public static function register_cpt() {         register_post_type('teacher', array(             'labels' => array(                 'name'          => __('TEACHER'),                 'all_items'     => __('TEACHERS'),                 'menu_name'     => __('SCHOOL'),             ),             'show_ui'           => TRUE,             'capability_type'   => 'educator',             'map_meta_cap'      => TRUE,         ));         register_post_type('student', array(             'labels' => array(                 'name'          => __('STUDENT'),                 'menu_name'     => __('STUDENTS'),             ),             'show_ui'           => TRUE,             'show_in_menu'      => 'edit.php?post_type=teacher',         ));     }      public static function add_role() {         if(get_role('headmaster') === NULL) {             $  caps = array();             foreach(get_role('administrator')->capabilities as $  cap => $  tmp) {                 $  pos = strpos($  cap, 'post');                 if($  pos !== FALSE) {                     $  cap = str_replace('post', 'educator', $  cap);                     $  caps[$  cap] = TRUE;                 }             }             add_role('headmaster', 'HEADMASTER', $  caps);         }     }      public static function modify_menu() {         global $  submenu;         unset($  submenu['edit.php?post_type=teacher'][10]);     } } School::init(); 

Making submenu expand on click

I was able to solve it I am trying to have my "about" and "rooms" dropdown to be able to only expand when clicked on and displaying a small arrow similar https://www.syracuse.edu/ in their "Info For" dropdown. When tabbing through it can work as is.

Also I noticed that in when tabbing through the menu and tabbing backwards (shift+tab) it dosnt go back up the dropdown why is that? Another issue is when I shrink the window to display the quick menu and tabbing through the menu it skips the…

Making submenu expand on click

Mostrar Submenu y ocultar cuando se hace click en otro Submenu

Estoy intentando mostrar un submenu cuando se hace click en un item y que cuando le de click a otro Submenu este se debe ocultar y mostrar el Submenu del item que di click y ademas de eso debe eliminar las clase que se agrega llamada open y añadirla al item que di click, de igual manera si le doy click a un item y le vuelvo a dar click a ese mismo item, debe ocultar el submenu, pero no he podido lograrlo, tengo el siguiente código

$  (".subtitle .action").click(function(event){  $  (this).parents(".subtitle").toggleClass("open");  $  (this).parents(".subtitle").find(".submenu").slideToggle("slow");      $  (this).parents(".subtitle").find(".submenu").toggleClass("opacity");  return false; });
<!DOCTYPE html> <html> <head> 	<title>Test</title> 	<style type="text/css"> 		.submenu { 			display: none; 		} 		.opacity { 			opacity: 0.5; 		} 	</style> </head> <body> 	<ul> 		<li class="subtitle"> 			<a href="#" class="action">Inicio</a> 			<ul class="submenu"> 				<li> 					<a href="#">Inicio 1</a> 				</li> 				<li> 					<a href="#">Inicio 2</a> 				</li> 				<li> 					<a href="#">Inicio 3</a> 				</li> 			</ul> 		</li> 		<li class="subtitle"> 			<a href="#" class="action">Nosotros</a> 			<ul class="submenu"> 				<li> 					<a href="#">Nosotros 1</a> 				</li> 				<li> 					<a href="#">Nosotros 2</a> 				</li> 				<li> 					<a href="#">Nosotros 3</a> 				</li> 			</ul>  		</li> 		<li class="subtitle"> 			<a href="#" class="action">Contacto</a> 			<ul class="submenu"> 				<li> 					<a href="#">Contacto 1</a> 				</li> 				<li> 					<a href="#">Contacto 2</a> 				</li> 				<li> 					<a href="#">Contacto 3</a> 				</li> 			</ul> 		</li> 		<li class="subtitle"> 			<a href="#" class="action">Empresa</a> 			<ul class="submenu"> 				<li> 					<a href="#">Empresa 1</a> 				</li> 				<li> 					<a href="#">Empresa 2</a> 				</li> 				<li> 					<a href="#">Empresa 3</a> 				</li> 			</ul> 		</li> 	</ul> 	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> </body> </html>

How can I include a option submenu page on my custom post type menu?

I have this custom post type:

// Register Custom Post Type Marca function create_banner_cpt() {     $  labels = array(         'name' => _x( 'Banner', 'Post Type General Name', 'sc-slider' ),         'singular_name' => _x( 'Banner', 'Post Type Singular Name', 'sc-slider' ),         'menu_name' => _x( 'Banner', 'Admin Menu text', 'sc-slider' ),         'name_admin_bar' => _x( 'Banner', 'Add New on Toolbar', 'sc-slider' ),         'archives' => __( 'Arquivos de banner', 'sc-slider' ),         'attributes' => __( 'Atributos de banner', 'sc-slider' ),         'parent_item_colon' => __( 'Slide anterior:', 'sc-slider' ),         'all_items' => __( 'Todos os slides', 'sc-slider' ),         'add_new_item' => __( 'Adicionar novo slide', 'sc-slider' ),         'add_new' => __( 'Adicionar novo', 'sc-slider' ),         'new_item' => __( 'Novo slide', 'sc-slider' ),         'edit_item' => __( 'Editar slide', 'sc-slider' ),         'update_item' => __( 'Atualizar slide', 'sc-slider' ),         'view_item' => __( 'Ver slide', 'sc-slider' ),         'view_items' => __( 'Ver slide', 'sc-slider' ),         'search_items' => __( 'Procurar slide', 'sc-slider' ),         'not_found' => __( 'Nenhum slide encontrado', 'sc-slider' ),         'not_found_in_trash' => __( 'Nenhum slide encontrado na lixeira', 'sc-slider' ),         'featured_image' => __( 'Inserir imagem no slide', 'sc-slider' ),         'set_featured_image' => __( 'Definir imagem do slide', 'sc-slider' ),         'remove_featured_image' => __( 'Remover imagem do slide', 'sc-slider' ),         'use_featured_image' => __( 'Usar como imagem do slide', 'sc-slider' ),         'insert_into_item' => __( 'Inserir no slide', 'sc-slider' ),         'uploaded_to_this_item' => __( 'Atualizar no slide', 'sc-slider' ),         'items_list' => __( 'Lista de slides', 'sc-slider' ),         'items_list_navigation' => __( 'Navegar na lista de slides', 'sc-slider' ),         'filter_items_list' => __( 'Filtrar lista de slides', 'sc-slider' ),     );     $  args = array(         'label' => __( 'Banner', 'sc-slider' ),         'description' => __( 'Banner rotativo', 'sc-slider' ),         'labels' => $  labels,         'menu_icon' => 'dashicons-welcome-write-blog',         'supports' => array('title', 'editor', 'thumbnail'),         'taxonomies' => array(),         'public' => true,         'show_ui' => true,         'show_in_menu' => true,         'menu_position' => 25,         'show_in_admin_bar' => true,         'show_in_nav_menus' => false,         'can_export' => false,         'has_archive' => false,         'hierarchical' => false,         'exclude_from_search' => true,         'show_in_rest' => true,         'publicly_queryable' => false,         'capability_type' => 'post',     );     register_post_type( 'sc-slider', $  args ); } add_action( 'init', 'create_banner_cpt', 0 ); 

I wanna include this option page:

// Settings Page: Configurar banner class configuraes_Settings_Page {      public function __construct() {         add_action( 'admin_menu', array( $  this, 'wph_create_settings' ) );         add_action( 'admin_init', array( $  this, 'wph_setup_sections' ) );         add_action( 'admin_init', array( $  this, 'wph_setup_fields' ) );     }      public function wph_create_settings() {         $  page_parent = 'edit.php?post_type=sc-slider';         $  page_title = 'Configurações do banner';         $  menu_title = 'Configurar banner';         $  capability = 'manage_banner_options';         $  slug = 'configuraes';         $  callback = array($  this, 'wph_settings_content');         add_submenu_page($  page_parent, $  page_title, $  menu_title, $  capability, $  slug, $  callback);     }      public function wph_settings_content() { ?>         <div class="wrap">             <h1>Configurações do banner</h1>             <?php settings_errors(); ?>             <form method="POST" action="options.php">                 <?php                     settings_fields( 'configuraes' );                     do_settings_sections( 'configuraes' );                     submit_button();                 ?>             </form>         </div> <?php     }      public function wph_setup_sections() {         add_settings_section( 'configuraes_section', 'Atenção: As funções a seguir estarão sujeitas a disponibilidade do tema.', array(), 'configuraes' );     }      public function wph_setup_fields() {         $  fields = array(             array(                 'label' => 'Efeito de transição',                 'id' => 'sc_slider_transition',                 'type' => 'radio',                 'section' => 'configuraes_section',                 'options' => array(                     'fade' => 'fade',                     'fadeout' => 'fadeout',                     'scrollHorz' => 'scrollHorz',                     'none' => 'none',                 ),             ),             array(                 'label' => 'Altura do banner',                 'id' => 'sc_slider_height',                 'type' => 'select',                 'section' => 'configuraes_section',                 'options' => array(                     '400 px' => '400 px',                     '500 px' => '500 px',                     '800 px' => '800 px',                     '100%' => '100%',                 ),             ),             array(                 'label' => 'Mostrar paginação',                 'id' => 'sc_slider_pager',                 'type' => 'radio',                 'section' => 'configuraes_section',                 'options' => array(                     'Sim' => 'Sim',                     'Não' => 'Não',                 ),             ),             array(                 'label' => 'Estilo da paginação',                 'id' => 'sc_slider_pager_template',                 'type' => 'select',                 'section' => 'configuraes_section',                 'options' => array(                     'Números' => 'Números',                     'Pontos' => 'Pontos',                 ),             ),             array(                 'label' => 'Velocidade das transições',                 'id' => 'sc_slider_speed',                 'type' => 'number',                 'section' => 'configuraes_section',                 'desc' => 'Velocidade em segundos',             ),             array(                 'label' => 'Tempo para troca de slide',                 'id' => 'sc_slider_timeout',                 'type' => 'number',                 'section' => 'configuraes_section',                 'desc' => 'Tempo em segundos',             ),             array(                 'label' => 'Pausar ao parar o mouse',                 'id' => 'sc_slide_mouse',                 'type' => 'radio',                 'section' => 'configuraes_section',                 'options' => array(                     'Sim' => 'Sim',                     'Não' => 'Não',                 ),             ),         );         foreach( $  fields as $  field ){             add_settings_field( $  field['id'], $  field['label'], array( $  this, 'wph_field_callback' ), 'configuraes', $  field['section'], $  field );             register_setting( 'configuraes', $  field['id'] );         }     }      public function wph_field_callback( $  field ) {         $  value = get_option( $  field['id'] );         $  placeholder = '';         if ( isset($  field['placeholder']) ) {             $  placeholder = $  field['placeholder'];         }         switch ( $  field['type'] ) {                 case 'radio':                     if( ! empty ( $  field['options'] ) && is_array( $  field['options'] ) ) {                         $  options_markup = '';                         $  iterator = 0;                         foreach( $  field['options'] as $  key => $  label ) {                             $  iterator++;                             if (!is_array($  value)) {                                 $  value = str_split($  value);                             };                             $  options_markup.= sprintf('<label for="%1$  s_%6$  s"><input id="%1$  s_%6$  s" name="%1$  s[]" type="%2$  s" value="%3$  s" %4$  s /> %5$  s</label><br/>',                             $  field['id'],                             $  field['type'],                             $  key,                             checked($  value[array_search($  key, $  value, true)], $  key, false),                             $  label,                             $  iterator                             );                             }                             printf( '<fieldset>%s</fieldset>',                             $  options_markup                             );                     }                     break;                 case 'select':                 case 'multiselect':                     if( ! empty ( $  field['options'] ) && is_array( $  field['options'] ) ) {                         $  attr = '';                         $  options = '';                         foreach( $  field['options'] as $  key => $  label ) {                             $  selectedvalue = false;                             if (is_array($  value))  {                                 $  selectedvalue = array_search($  key, $  value, true);                             };                             $  options.= sprintf('<option value="%s" %s>%s</option>',                                 $  key,                                 selected($  value[$  selectedvalue], $  key, false),                                 $  label                             );                         }                         if( $  field['type'] === 'multiselect' ){                             $  attr = ' multiple="multiple" ';                         }                         printf( '<select name="%1$  s[]" id="%1$  s" %2$  s>%3$  s</select>',                             $  field['id'],                             $  attr,                             $  options                         );                     }                     break;             default:                 printf( '<input name="%1$  s" id="%1$  s" type="%2$  s" placeholder="%3$  s" value="%4$  s" />',                     $  field['id'],                     $  field['type'],                     $  placeholder,                     $  value                 );         }         if( isset($  field['desc']) ) {             if( $  desc = $  field['desc'] ) {                 printf( '<p class="description">%s </p>', $  desc );             }         }     } } new configuraes_Settings_Page(); 

But this submenu doesn’t appears. How can I do this?

Highlight “shop” in menu when on product page, without showing a sub-menu?

I’ve tried doing some research on this but can’t get my head around it…

I have one main menu where I want to highlight a page (named “Shop”), but don’t want a dropdown menu with sub-pages (product categories and products). I want the customer to click on “Shop” and then go from there.

I understand that I can get “Shop” highlighted by creating a page hierchy and then disable the dropdown sub-menu from showing up. But if I do this, then my second menu won’t have a dropdown sub-menu which is necessary.

Any ideas?

Wagtail – How To Remove Sub-Menu Items From Settings Menu

Wagtail includes a “settings” menu item by default, with some default settings items, such as “sites” and “redirects”.

I know that you can register a new setting with the register_setting decorator, and that various hooks are available for customizing the top level menu items, but not sub-menu items. How can I REMOVE (or hide the display of) the default settings items?

Submenu tab not showing in specific Website

Hi I have create 2 custom module and it’s working correctly. First I created the custom module 1 where the link for the configuration of this is displayed in the stores->settings->configuration. Now I can click on this link and do any modification for the configuration. Now I added another module which I also place the configuration link in the same tab as the first module. But the problem now is that I can’t see the second link of my second custom module. Only the first custom module 1 link is being displayed when I select a specific store view. Below are the images

enter image description here

As you can see if the store view is set to default the two custom module is being displayed correctly but when I select a specific store view

enter image description here

As you can see in the second image upon selecting as specific store view the second link for my custom module is not being displayed. Any idea on what might cause this?

How to Create Menu and Submenu with gcc in Linux Console?

I would like to create an simple text editor in console Linux using gcc. Probably, there will be another Sub-Menu under a Menu. The editor I would like to create is something like this Borland Turbo C/C++’s IDE below. I probably also need to use some certain keys function, especially Fn key. The almost same editor I found works under Linux Console is mcedit, but not so complete. I am asking here is in Linux console, not in X-Window (graphic).

Then my question is, is any specific command to create it? How to start to do it using gcc? Borland Turbo C/C++ Editor

Expandir altura del elemento UL al desplegar submenú

Tengo una barra de navegación que, digamos, en su versión móvil, al pulsar en el botón de [MENÚ] aparece a modo de columna. Existe en la barra una última opción representada a modo de dropdown para desplegar otro submenú.

El UL que conforma el menú tiene un fondo de color de tono oscuro casi negro.

Lo que estoy queriendo lograr es que, en la versión móvil, tras desplegarse el menú principal una vez pulsado el botón de [MENÚ], cuando se despliegue el submenú, igualmente, se expanda la altura del UL y con ello, el fondo oscuro por debajo del submenú desplegado. Y no que quede ese submenú como si estuviera fuera del UL como ocurre ahora.

Aquí pongo el código de los archivos que entran en juego:

index.html

<!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">      <meta name="csrf-token" content="{{ csrf_token() }}">      <title>Barra de Menú :: Fija y Animada</title>      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     <link href="css/app.css" rel="stylesheet">     <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/> </head> <body>     <div id="app">          <div class="barra-responsive">             <div class="logo">                 <img src="images/logo.png" alt="Logo">             </div>             <div class="menu">                 <h4>Menú</h4>             </div>         </div>          <nav>             <div class="logo">                 <img src="images/logo.png" alt="Logo">             </div>             <ul class="animated">                 <li><a href="#" class="active">Home</a></li>                 <li><a href="#">About</a></li>                 <li><a href="#">Services</a></li>                 <li><a href="#">Portfolio</a></li>                 <li><a href="#">Team</a></li>                 <li><a href="#">Contact</a></li>                 <li class="dropdown">                     <!-- <a href="#">Cuenta</a> -->                     <a class="dropdown-toggle" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Tu Cuenta">Cuenta</a>                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">                         <a class="dropdown-item" href="#" title="Acceder al Perfil">Perfil</a>                         <a class="dropdown-item" href="#" title="Salir de la sesión">Logout</a>                     </div>                 </li>             </ul>         </nav>         <section class="sec1"></section>         <section class="content">             <h1>Lorem aliquip quis ullamco</h1>             <p>                 Mollit laborum nisi voluptate mollit ut proident deserunt nulla pariatur mollit occaecat cillum eiusmod eu. Officia commodo duis aliqua veniam consectetur. Laboris esse ex fugiat occaecat anim.                 Consequat minim dolore ipsum cupidatat sunt Lorem anim do incididunt proident sunt aute amet aliquip. Incididunt voluptate sunt voluptate sint irure cillum est est elit veniam tempor mollit enim. Esse eu veniam pariatur ipsum. Amet qui anim ea deserunt est aliqua aliqua occaecat elit veniam ullamco. Mollit id irure aliquip laborum laborum velit culpa deserunt amet ad eu. Ipsum id aliqua mollit voluptate. Labore fugiat exercitation excepteur excepteur occaecat duis consequat.                 <br><br>                 Culpa anim consequat minim occaecat cupidatat in quis esse. Ea mollit est veniam commodo culpa in laborum fugiat cupidatat reprehenderit nulla anim dolore et. Velit occaecat pariatur sit sit deserunt incididunt officia aute labore id sunt culpa. Ea ipsum occaecat aliquip reprehenderit proident nulla dolor esse do consectetur veniam nulla. In commodo excepteur id non cillum. Veniam nostrud do culpa sit cupidatat esse sit veniam sint excepteur Lorem sit.                 Aliqua consectetur veniam excepteur incididunt ad. Qui elit mollit qui dolore ipsum mollit. Anim eiusmod quis voluptate non sint cupidatat. Culpa consequat nostrud sit ipsum laboris irure proident esse. Excepteur mollit sunt labore amet esse nostrud nostrud Lorem commodo deserunt velit duis non. Cillum anim id nisi ex sunt consequat tempor tempor id incididunt sit.             </p>         </section>         <section class="sec2"></section>         <section class="content">             <h1>Adipisicing sit ex esse</h1>             <p>                 Mollit laborum nisi voluptate mollit ut proident deserunt nulla pariatur mollit occaecat cillum eiusmod eu. Officia commodo duis aliqua veniam consectetur. Laboris esse ex fugiat occaecat anim.                 Consequat minim dolore ipsum cupidatat sunt Lorem anim do incididunt proident sunt aute amet aliquip. Incididunt voluptate sunt voluptate sint irure cillum est est elit veniam tempor mollit enim. Esse eu veniam pariatur ipsum. Amet qui anim ea deserunt est aliqua aliqua occaecat elit veniam ullamco. Mollit id irure aliquip laborum laborum velit culpa deserunt amet ad eu. Ipsum id aliqua mollit voluptate. Labore fugiat exercitation excepteur excepteur occaecat duis consequat.                 <br><br>                 Culpa anim consequat minim occaecat cupidatat in quis esse. Ea mollit est veniam commodo culpa in laborum fugiat cupidatat reprehenderit nulla anim dolore et. Velit occaecat pariatur sit sit deserunt incididunt officia aute labore id sunt culpa. Ea ipsum occaecat aliquip reprehenderit proident nulla dolor esse do consectetur veniam nulla. In commodo excepteur id non cillum. Veniam nostrud do culpa sit cupidatat esse sit veniam sint excepteur Lorem sit.                 Aliqua consectetur veniam excepteur incididunt ad. Qui elit mollit qui dolore ipsum mollit. Anim eiusmod quis voluptate non sint cupidatat. Culpa consequat nostrud sit ipsum laboris irure proident esse. Excepteur mollit sunt labore amet esse nostrud nostrud Lorem commodo deserunt velit duis non. Cillum anim id nisi ex sunt consequat tempor tempor id incididunt sit.             </p>         </section>         <section class="sec3"></section>         <section class="sec4"></section>         <section class="sec5"></section>      </div><!-- /div #app -->      <!-- jQuery, Bootstrap, ... -->     <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>      <script type="text/javascript">         $  (window).on('scroll', function() {             if ($  (window).scrollTop()) {                 $  ('nav').addClass('estrechada');             } else {                 $  ('nav').removeClass('estrechada');             }         });         //Mostrando/Ocultando lista de enlaces de menú para casos de responsivo         /*$  (document).ready(function() {             $  ('.menu h4').click(function() {                 $  ('nav ul').toggleClass('active');             });         });*/         //************************************************************         $  (document).ready(function() {             $  ('.menu h4').click(function() {                 //$  ('nav ul').toggleClass('active');                 //---------------------------------------------                 if ($  ('nav ul').hasClass('fadeIn')) {                     // if the div has fadeIn class, remove it and add fadeOut                     $  ('nav ul').toggleClass('fadeIn').toggleClass('fadeOut')                 }                 else if ($  ('nav ul').hasClass('fadeOut')) {                     // if the div has fadeOut class, remove it and add fadeIn                     $  ('nav ul').toggleClass('fadeOut').toggleClass('fadeIn')                 } else {                     // if the div has neither of fadeIn nor fadeOut, add fadeIn class in                     $  ('nav ul').toggleClass('fadeIn')                 };             });         });         $  (window).bind('resize', function() {             console.log($  (this).width())             if($  (this).width() > 768){                 $  ('nav ul').removeClass('animated').removeClass('fadeOut')             }             else {                 $  ('nav ul').addClass('animated')             }         });     </script> </body> </html> 

app.css

@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Roboto:700);  /* :: PARTE PÚBLICA :: */  /* ********** Reset Styles ********** */  body {     margin: 0;     padding: 0;     font-family: sans-serif; }  /* ********** Bootstrap Styles ********** */  /* ********** Estilos Propios ********** */  nav {     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100px;     padding: 10px 100px;     box-sizing: border-box;     transition: 0.5s; }  nav.estrechada {     background-color: rgba(0, 0, 0, 0.8);     height: 80px;     padding: 10px 50px; }  nav .logo {     float: left; }  nav .logo img {     height: 80px;     transition: 0.5s; }  nav.estrechada .logo img {     height: 60px; }  nav ul {     float: right;     margin: 0;     padding: 0;     display: flex; }  nav ul li {     list-style: none; }  nav ul li a {     line-height: 80px;     /*misma medida que la asignada como altura al CSS de la IMG del logo*/     color: #262626;     padding: 5px 20px;     font-family: "Roboto", sans-serif;     text-transform: uppercase;     transition: 0.5s; }  nav.estrechada ul li a {     color: #fff;     line-height: 60px;     /*misma medida que la asignada como altura al CSS de la IMG del logo*/ }  nav ul li a.active, nav ul li a:hover, nav ul li.dropdown a:hover {     color: #fff;     background-color: #f00;     text-decoration: none; }  li.dropdown a.dropdown-toggle:hover {/**/     color: white; }  section.sec1 {     width: 100%;     height: 100vh;     background-image: url(../images/header-cielo-01.jpg?52aaab2203e2dca5be8142e603d77828);     background-size: cover; }  section.sec2 {     width: 100%;     height: 100vh;     background-image: url(../images/header-cielo-02.jpg?8ea857ffda8c2ffa533a095e958a6330);     background-size: cover; }  section.sec3 {     width: 100%;     height: 100vh;     background-image: url(../images/header-cielo-03.jpg?fbb4096c33a4b4c760892baaf3d5bdc0);     background-size: cover; }  section.content {     padding: 100px;     text-align: justify; }  section.content h1 {     margin: 0;     padding: 0;     font-size: 2em; }  section.content p {     margin: 20px 0 0;     padding: 0;     font-size: 1.1em; }  /* ********** Parte Responsive ********** */  .barra-responsive {     display: none; }  @media (max-width: 768px) {     .barra-responsive {         display: block;         width: 100%;         height: 60px;         background-color: #262626;         position: fixed;         top: 0;         left: 0;         padding: 5px 20px;         box-sizing: border-box;         z-index: 1;     }      .barra-responsive .logo img {         float: left;         height: 50px;     }      .barra-responsive .menu h4 {         float: right;         color: #fff;         margin: 0;         padding: 0;         line-height: 50px;         /*misma medida que la asignada como altura al CSS de la IMG del logo*/         cursor: pointer;         text-transform: uppercase;     }      nav,     nav.estrechada {         background-color: #262626;         height: 60px;         padding: 0;     }      nav .logo {         display: none;     }      nav ul {         position: absolute;         width: 100%;         top: 60px;         left: 0;         background-color: #262626;         float: none;         display: block;         opacity: 0;     }      nav ul.active {         display: block;     }      nav ul li {         width: 100%;     }      nav ul li a,     li.dropdown a.dropdown-toggle {/**/         display: block;         width: 100%;         padding: 0;         text-align: center;         line-height: 30px !important;         color: white;     }     .dropdown-menu {         width: 98%;         text-align: center;     } } 

Esto es un equivalente en el CodePen