HTML - Error en la visualización del Menu HTML

   
Vista:

Error en la visualización del Menu HTML

Publicado por stefy26 (1 intervención) el 26/08/2014 19:08:52
Hola!

Buenas Tardes a todos! de antemano gracias por leerme y a quien pueda hecharme un cable ayudandome!

He comprado esta template http://themeforest.net/item/stability-responsive-html5css3-template/full_screen_preview/7222255

y sucede que cuando estoy navegando hacia abajo siempre me sale el menu, mas sin embargo yo quiero que me salga el menu de arriba que tiene el fondo en color rojo, quiero que tambien deslice con el menu.

Este es el codigo que trae la template, si alguien me puede ayudar en cuanto a que etiqueta agregar o quitar, porque he probado con la etiqueta>

1
2
<nav class="nav-main">
<ul data-breakpoint="992" class="flexnav">

mas no sale como quiero.

Os dejo el codigo al completo! Gracias >)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!-- Header -->
 
<header class="header header-top-colored menu-colored">
 
	<div class="header-top">
 
		<div class="container">
 
			<div class="header-top-left">
 
				<span class="info-item"><img src="eng-flag.png" width="16" height="12"  alt=""/></i> <a href="#">Ingles</a></span>
				<span class="info-item"><img src="fra-flag copia.png" width="16" height="12"  alt=""/></i> <a href="#">Portugues</a></span>
				<span class="info-item"><img src="ger-flag copia.png" width="16" height="12"  alt=""/></i> <a href="#">Español
				<span class="info-item"><i class="fa fa-envelope"></i> <a href="mailto:info@carmin.es">info@carmin.es</a></span>
			</div>
			<div class="header-top-right">
				<span class="login">
					<i class="fa fa-lock"></i> <a href="#"target="_blank">Login</a>
				</span>
				<span class="register">
				<i class="fa fa-pencil-square-o"></i>	Aún no eres miembro? <a href="#"target="_blank">Registrate</a>
			</div>
 
		</div>
	</div>
	<div class="header-main">
		<div class="container">
			<!-- Logo -->
			<div class="logo">
				<!-- <a href="index.html"><img src="images/logo.png" alt="Stability"></a> -->
				<h1><a href="index.html"><img src="images/logo.png" width="200" height="45"/></a></h1>
			</div>
			<!-- Logo / End -->
 
			<button type="button" class="navbar-toggle">
			<i class="fa fa-bars"></i>
			</button>
 
			<!-- Navigation -->
			<nav class="nav-main">
				<ul data-breakpoint="992" class="flexnav">
					<li class="active"><a href="index.html">Home</a>
 
					</li>
					<li><a href="nosotros.html">Nosotros</a>
 
					</li>
					<li><a href="servicios.html">Servicios</a>
 
					</li>
					<li><a href="#">Únete</a>
						<ul>
							<li><a href="colabora.html">Colabora</a></li>
							<li><a href="paquetes.html">Paquetes</a></li>
 
						</ul>
					</li>
					<li><a href="#">Noticias</a>
						<ul>
							<li><a href="noticias.html">Eventos</a></li>
 
						</ul>
					</li>
					<li><a href="contacts.html">Contacto</a></li>
				</ul>
			</nav>
			<!-- Navigation / End -->
 
		</div>
	</div>
 
</header>
<!-- Header / End -->
 
<!-- Main -->
<div class="main" role="main">
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Texto En 3D!
- Matrix
- Tipo de bordes
Imágen de perfil de xve

Error en la visualización del Menu HTML

Publicado por xve (1178 intervenciones) el 27/08/2014 07:42:23
Hola, he revisado la pagina que nos indicas, y la verdad no veo ahí ningún menú de color rojo!!!

Entiendo que el problema esta en los estilos mas que en el código HTML.

Si nos puedes comentar...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Error en la visualización del Menu HTML

Publicado por Stefy26 (5 intervenciones) el 27/08/2014 09:24:07
Hola! Buenos días,

Muchas gracias por tomar tu tiempo en contestarme.

Sí entras en la plantilla por favor y escoges la opción que aparece en features / header versión 4 ( ahí saldrá el estilo que yo estoy utilizando) http://stability.dan-fisher.com/index-header-4.html
Estoy usando la índex con el header 4, el cual agrega una barra arriba encima del menú, con opciones de login y registro, como también de teléfono y email.

Es ese top header que yo quisiera que a la hora de cuando hago scroll con el mouse y el menú normal se desplaza según el movimiento de mi mouse, conjuntamente ese top header lo haga a la par.

Ayer intente cambiar el custom.js y al intentar cambiarlo me lo dejaba todo en estático y el menú dejaba de moverse agregando lo siguiente:

1
body.sticky-header .header {top:0;}

Te lo dejo aquí el css por sí eso puede aclarar un poco más el panorama.

Infinitas gracias desde ya!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
/**
    * @package Stability Responsive HTML5 Template
    * 
    * Template Scripts
    * Created by Dan Fisher

    Init JS
    
    1. Main Navigation
    2. Isotope
    3. Magnific Popup
    4. Flickr
    5. Carousel (based on owl carousel plugin)
    6. Content Slider (based on owl carousel plugin)
    7. FitVid (responsive video)
    8. Sticky Header
    9. Shape Boxes
*/
 
jQuery(function($){
 
 
 
    /* ----------------------------------------------------------- */
    /*  1. Main Navigation
    /* ----------------------------------------------------------- */


    $(".flexnav").flexNav({
        'animationSpeed':     200,            // default for drop down animation speed
        'transitionOpacity':  true,           // default for opacity animation
        'buttonSelector':     '.navbar-toggle', // default menu button class name
        'hoverIntent':        true,          // Change to true for use with hoverIntent plugin
        'hoverIntentTimeout': 50,            // hoverIntent default timeout
        'calcItemWidths':     false,          // dynamically calcs top level nav item widths
        'hover':              true            // would you like hover support?      
    });


    /* ----------------------------------------------------------- */
    /*  2. Isotope
    /* ----------------------------------------------------------- */

    (function() {


        // Portfolio settings
        var $container          = $('.project-feed');
        var $filter             = $('.project-feed-filter');

        $(window).smartresize(function(){
            $container.isotope({
                filter              : '*',
                resizable           : true,
                layoutMode: 'sloppyMasonry',
                itemSelector: '.project-item'
            });
        });

        $container.imagesLoaded( function(){
            $(window).smartresize();
        });

        // Filter items when filter link is clicked
        $filter.find('a').click(function() {
            var selector = $(this).attr('data-filter');
            $filter.find('a').removeClass('btn-primary');
            $(this).addClass('btn-primary');
            $container.isotope({ 
                filter             : selector,
                animationOptions   : {
                animationDuration  : 750,
                easing             : 'linear',
                queue              : false
                }
            });
            return false;
        });
       
    })();



    /* ----------------------------------------------------------- */
    /*  3. Magnific Popup
    /* ----------------------------------------------------------- */
    $('.popup-link').magnificPopup({
        type:'image',
        // Delay in milliseconds before popup is removed
        removalDelay: 300,

        // Class that is added to popup wrapper and background
        // make it unique to apply your CSS animations just to this exact popup
        mainClass: 'mfp-fade'
    });



    /* ----------------------------------------------------------- */
    /*  4. Flickr
    /* ----------------------------------------------------------- */
    
    $('.flickr-feed').jflickrfeed({
        limit: 9,
        qstrings: {
            id: '52617155@N08'
        },
        itemTemplate: '<li><a href="{{link}}" target="_blank"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
    }, 
    function(data) {
        $(".flickr-feed li:nth-child(3n)").addClass("nomargin");
    });



    /* ----------------------------------------------------------- */
    /*  5. Carousel (based on owl carousel plugin)
    /* ----------------------------------------------------------- */
    var owl = $("#owl-carousel");

    owl.owlCarousel({
        items : 4, //4 items above 1000px browser width
        itemsDesktop : [1000,4], //4 items between 1000px and 901px
        itemsDesktopSmall : [900,2], // 4 items betweem 900px and 601px
        itemsTablet: [600,2], //2 items between 600 and 0;
        itemsMobile : [480,1], // itemsMobile disabled - inherit from itemsTablet option
        pagination : false
    });

    // Custom Navigation Events
    $("#carousel-next").click(function(){
        owl.trigger('owl.next');
    });
    $("#carousel-prev").click(function(){
        owl.trigger('owl.prev');
    });



    /* ----------------------------------------------------------- */
    /*  6. Content Slider (based on owl carousel plugin)
    /* ----------------------------------------------------------- */
    $(".owl-slider").owlCarousel({

        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true,
        navigationText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
        pagination: true

    });



    /* ----------------------------------------------------------- */
    /*  7. FitVid (responsive video)
    /* ----------------------------------------------------------- */
    $(".video-holder").fitVids();


    /* ----------------------------------------------------------- */
    /*  -- Misc
    /* ----------------------------------------------------------- */

    $('.title-accent > h3').each(function(){
        var me = $(this);
        me.html(me.html().replace(/^(\w+)/, '<span>$1</span>'));
    });

    // Back to Top
    $("#back-top").hide();
    
    if($(window).width() > 991) {
        $('body').append('<div id="back-top"><a href="#top"><i class="fa fa-chevron-up"></i></a></div>')
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function(e) {
            e.preventDefault();
            $('body,html').animate({
                scrollTop: 0
            }, 400);
            return false;
        });
    };

    // Animation on scroll
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (isMobile == false) {
        
        $("[data-animation]").each(function() {

        var $this = $(this);

        $this.addClass("animation");

        if(!$("html").hasClass("no-csstransitions") && $(window).width() > 767) {

            $this.appear(function() {

                var delay = ($this.attr("data-animation-delay") ? $this.attr("data-animation-delay") : 1);

                if(delay > 1) $this.css("animation-delay", delay + "ms");
                $this.addClass($this.attr("data-animation"));

                setTimeout(function() {
                    $this.addClass("animation-visible");
                }, delay);

            }, {accX: 0, accY: -170});

        } else {

            $this.addClass("animation-visible");

        }

    });  
    }


    /* ----------------------------------------------------------- */
    /*  8. Sticky Header
    /* ----------------------------------------------------------- */
    if($("body").hasClass("boxed"))
        return false;

    var header = $("header.header"),
        headH = header.height(),
        logoHolder = header.find(".logo"),
        logo = header.find(".logo img"),
        logoW = logo.width(),
        logoH = logo.height(),
        logoSmH = 50,
        $this = this;

    logo.css("height", logoSmH);

    var logoSmW = logo.width();
    logo.css("height", "auto").css("width", "auto");

    $this.stickyHeader = function() {

        if(header.hasClass("header-menu-fullw"))
            return false;

        if($(window).scrollTop() > (headH) && $(window).width() > 991) {

            if($("body").hasClass("sticky-header"))
                return false;

            logo.stop(true, true);

            $("body").addClass("sticky-header").css("padding-top", headH);

            logoHolder.addClass("logo-sticky");

            logo.animate({
                width: logoSmW,
                height: logoSmH
            }, 300, function() {});

        } else {

            if($("body").hasClass("sticky-header")) {

                $("body").removeClass("sticky-header").css("padding-top", 0);

                logoHolder.removeClass("logo-sticky");

                logo.animate({
                    width: logoW,
                    height: logoH,
                }, 300, function() {

                    logo.css({
                        width: "auto",
                        height: "auto"
                    });

                });
            }
        }
    }

    $(window).on("scroll", function() {
        $this.stickyHeader();
    });
    $this.stickyHeader();



    /* ----------------------------------------------------------- */
    /*  9. Shape Boxes
    /* ----------------------------------------------------------- */
    function init() {
        var speed = 250,
            easing = mina.easeinout;

        [].slice.call ( document.querySelectorAll( '.shape-item' ) ).forEach( function( el ) {
            var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
                pathConfig = {
                    from : path.attr( 'd' ),
                    to : el.getAttribute( 'data-path-hover' )
                };

            el.addEventListener( 'mouseenter', function() {
                path.animate( { 'path' : pathConfig.to }, speed, easing );
            } );

            el.addEventListener( 'mouseleave', function() {
                path.animate( { 'path' : pathConfig.from }, speed, easing );
            } );
        } );
    }

    init();
});



// Parallax Background
$(window).load(function () {

    if($(".parallax-bg").get(0) && $(window).width() > 991) {
        if(!Modernizr.touch) {
            $(window).stellar({
                responsive:true,
                scrollProperty: 'scroll',
                parallaxElements: false,
                horizontalScrolling: false,
                horizontalOffset: 0,
                verticalOffset: 0
            });
        } else {
            $(".parallax-bg").addClass("disabled");
        }
    }
});

Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Error en la visualización del Menu HTML

Publicado por xve (1178 intervenciones) el 27/08/2014 10:23:25
Hola Stefy, nos has adjuntado el archivo de javascript, pero no el de los estilos (css)

Ahora si veo la franja roja...;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Error en la visualización del Menu HTML

Publicado por Stefy26 (5 intervenciones) el 27/08/2014 10:47:02
Hola!

Es que no tiene archivo de custom.css

Sólo ese se custom.js

Gracias

Podría ser uno de estos archivos?
image
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Error en la visualización del Menu HTML

Publicado por xve (1178 intervenciones) el 27/08/2014 15:08:14
Hola Stefy, puede ser cualquier de los que tienes la extensión .css

La web esta publicada en Internet? para poder revisarla?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Error en la visualización del Menu HTML

Publicado por Stefy26 (5 intervenciones) el 27/08/2014 16:01:23
Hola!

Sí!

Swapcoin.us/verdu

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Error en la visualización del Menu HTML

Publicado por Stefy26 (5 intervenciones) el 28/08/2014 01:08:29
Buenas noches!

Creo que podría ser este código verdad:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
/* Sticky Menu */
body.sticky-header .header {
  position: fixed;
  top: -44px;
  left: 0;
  right: 0;
  z-index: 99;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}
body.sticky-header .header .header-main:before {
  height: 80px;
}
body.sticky-header .header .header-top-left:before {
  height: 80px;
}
body.sticky-header .header .logo {
  padding: 16px 0;
}
body.sticky-header .header .logo h1,
body.sticky-header .header .logo h2 {
  font-size: 30px;
}
body.sticky-header .header .nav-main {
  min-height: 80px;
}
@media all and (min-width: 992px) {
  body.sticky-header .header .flexnav > li > a {
    line-height: 80px;
  }
  body.sticky-header .header.menu-pills .flexnav {
    padding-top: 18px;
  }
  body.sticky-header .header.menu-pills .flexnav > li > a {
    line-height: 44px;
  }
}
.header-top {
  background: #2f2f2f;
  padding: 14px 0;
  color: #a3a3a3;
  font-size: 10px;
  line-height: 16px;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .header-top {
    display: table;
  }
}
.header-top ul {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
  margin: 0;
  display: inline-block;
}
.header-top ul > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.header-top ul > li {
  position: relative;
  padding: 0 10px 0 13px;
}
.header-top ul > li:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -4px;
  background: #616161;
  height: 7px;
  width: 1px;
}
.header-top ul > li:first-child {
  padding-left: 0;
}
.header-top ul > li:first-child:before {
  display: none;
}
.header-top .info-item {
  margin-right: 25px;
}
.header-top a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.header-top a:hover {
  text-decoration: none;
  color: #fff;
  border-bottom-color: #616161;
}
.header-top .fa {
  font-size: 14px;
  vertical-align: top;
  margin-right: 5px;
  color: #fff;
}
.header-top-left {
  float: left;
}
@media (max-width: 767px) {
  .header-top-left {
    display: table;
  }
}
.header-top-right {
  float: right;
}
.header-top-right > span + span {
  margin-left: 32px;
}
.header-top-right > span + span.info-item {
  margin-left: 25px;
  margin-right: 0;
}
.header-top-right > span.info-item {
  margin-right: 0;
}
@media (max-width: 767px) {
  .header-top-right {
    float: none;
    text-align: center;
  }
}
/* Header Main */
.header-main {
  position: relative;
  background: #ececec;
}
.header-main:before,
.header-main:after {
  content: " ";
  display: table;
}
.header-main:after {
  clear: both;
}
.header-main:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  background-image: -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#00ffffff', GradientType=0);
}
.header-main > .container {
  position: relative;
}
/* Logo */
.header .logo {
  margin: 0;
  padding: 29px 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  float: left;
}
.header .logo img {
  position: relative;
  display: inline-block;
  z-index: 2;
}
.header .logo h1,
.header .logo h2 {
  position: relative;
  z-index: 2;
  font-family: 'Anton', sans-serif;
  font-size: 36px;
  line-height: 1em;
  text-transform: uppercase;
  color: #2f2f2f;
  font-weight: normal;
  margin: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.header .logo h1 > a,
.header .logo h2 > a {
  color: #2f2f2f;
  text-decoration: none;
  display: inline-block;
}
.header .logo h1 > a:first-letter,
.header .logo h2 > a:first-letter {
  color: #dc2a0b;
}
.header .logo .tagline {
  margin: 0;
  font-size: 10px;
  line-height: 1.5em;
  text-transform: uppercase;
  color: #a3a3a3;
  position: relative;
  z-index: 2;
}

Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar