Problems with page

Hey guys once again!
Thanks a lot for all your previous help!
Ive been recreating the page and i put it onto the server, but still I have some problems:

  1. How to make an effect of underlining the current watching section on the navingation bar like this:
    https://i.imgsafe.org/ed339c71fe.jpg

  2. Animations i.e. fade do not want to work for me

  3. Site is like too small and it doesnt fit well. If you could help me also with querries, i would be grateful.

I really appreciate every help and tips for me, thanks in advance.
Site: <removed at member's request>

Use the border-bottom and transition property.

2 Likes

If you need a little more detail on @littlebirdy’s suggestion, there is an excellent CSS reference here: http://tympanus.net/codrops/css_reference/

1 Like

That would be a scripting task and you would need to add an active class to that element when the link is clicked and then remove it when another link is clicked etc. You would then use that .active class in css to provide the underline on that item.

Which animations are not working exactly as there is a lot going on in that page? You have a jquery error in the console which may be a problem:

Uncaught TypeError: $(...).on is not a function(…)

It points to this code:

$("a").on('click', function(event) {

I believe .on is only available from jquery 1.7 and you seem to be using 1.4.


<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

You will have to be more specific and do one thing at a time as we can’t re-code a whole site. Point to one area in question and then describe what is wrong with it and what you would like to happen to it and what you have tried to do to fix it?

1 Like

Hi guys. Thanks a lot for all your answers.
Now I focused on the first thing - getting an underline effect on navigation bar like this:
https://i.imgsafe.org/ed339c71fe.jpg

Here is the code for my navigation in index.htm:

<div class="pasek" style="position:fixed;z-index:999;width:100%;top:0px;">
	  <div class="lewo" style="background:white;  content: ""position: absolute; width: 100%;height: 2px; bottom: 0;left: 0;background-color: rgba(255, 255, 255, 0.5);visibility: hidden;-webkit-transform: scaleX(0);-moz-transform: scaleX(0);-ms-transform: scaleX(0);-o-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;-ms-transition: all 0.3s ease-in-out 0s;-o-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;">
		<img src="images/logoost.jpg" height="62" width="10%" style="padding-left:7%">	
		<a href="#home" class="pasek-brand smoothScroll" style="position:relative;;padding-left:10%;top:-25px;background:white;">SPRYTNE SZKRABY</a>
	 <a href="#home" class="smoothScroll" style="position:relative;top:-30px;padding-left:25%;font-size:90%">HOME </a> 
     <a href="#mleko" class="smoothScroll" style="position:relative;top:-30px;padding-left:2%;font-size:90%">O NAS </a> 
	 <a href="#mleko1" class="smoothScroll" style="position:relative;top:-30px;padding-left:2%;font-size:90%">NASZ PERSONEL</a> 
     <a href="#mleko2" class="smoothScroll" style="position:relative;top:-30px;padding-left:2%;font-size:90%">OFERTA </a> 
	 <a href="#mleko3" class="smoothScroll" style="position:relative;top:-30px;padding-left:2%;font-size:90%">KONTAKT </a> 
	 </div>
</div>

Style.css:

.pasek{
	}
.pasek-lewo{
	position: relative;
	 display:inline-block;
	background-color: white;
	padding-right:10%;
	padding-left:20%;
}
.pasek-prawo{
	 position: relative;
	 display:inline-block;
	background-color: white;
	padding-right:10%;
	padding-left:70%;
}
.pasek-lewo, .pasek-prawo{
	float:left;
	width:50%;
	background:#ffffff
}

.pasek-brand{
	color:#5e5e5e;
	height:50px;
	font-size:22px;
	line-height:20px;
	font-family:sans-serif;
	font-weight: 700;
	letter-spacing: 1.7px;
}

And here is probably the code for this underlining i got from previous page:

.navbar-default .navbar-nav li a{color:#777;font-size:14px;font-weight:300;letter-spacing:1px;text-transform:uppercase;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;padding-left:22px;}
.navbar-default .navbar-nav li a span{position:relative;display:block;padding-bottom:2px;}
.navbar-default .navbar-nav li a span:before{content:"";position:absolute;width:100%;height:2px;bottom:0;left:0;background-color:rgba(255, 255, 255, 0.5);visibility:hidden;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 0.3s ease-in-out 0s;-moz-transition:all 0.3s ease-in-out 0s;-ms-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s;}
.navbar-default .navbar-nav li a:hover span:before{visibility:visible;-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1);}
.navbar-default .navbar-nav li.active a span:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1);background-color:#304352;}
.navbar-default .navbar-nav > li a:hover{color:#304352 !important;}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{color:#777;background-color:transparent;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{color:#304352;background-color:transparent;}
.navbar-default .navbar-toggle{border:none;padding-top:10px;}
.navbar-default .navbar-toggle .icon-bar{border-color:transparent;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{background-color:transparent;}

Could you help me in adjusting this in the working way for my webpage?
Thanks once again in advance.

Also there is an issue connected with resolution. The page seems to be too small and it looks like this:
https://i.imgsafe.org/199e1a1850.jpg
If you could help me, I would be grateful.
Thanks in advance.

Hi,

As I said in my first post you need to do this via your script by adding a class when the script is run. You seem to have three different scroll scripts in place but it seems that the one in custom.js is the one that is running.

Replace the script in custom.js with this one instead.

 $(window).load(function() {
     $('.preloader').fadeOut(1000);
 });

 $(function() {
     $('.pasek a').bind('click', function(event) {
         var $anchor = $(this);
         $('.pasek a').removeClass('active');
         $anchor.addClass('active');
         $('html, body').stop().animate({
             scrollTop: $($anchor.attr('href')).offset().top - 49
         }, 1000);
         event.preventDefault();
     });
 });
 $(function() {
     $('body').vegas({
         slides: [{
             src: 'images/slide-img1.jpg'
         }, {
             src: 'images/slide-img2.jpg'
         }, {
             src: 'images/slide-img3.jpg'
         }],
         timer: false,
         transition: ['zoomIn', ],
         animation: ['kenburns']
     });
 });

Make sure you have the right file and always keep a backup of everything before you change stuff.

Next you need to add the css that will draw the underline when the menu item is active. Add this at the end of the CSS or at least after any existing styles for the same item.

.smoothScroll.active{border-bottom:2px solid #000;margin-left:2%;padding-left:0!important}

That will now draw an underline under the active menu item when it is clicked. I have this working locally so I know it is working.

Again it is unclear what you mean as that looks really big to me?

Your page is much too wide and needs a max-width to stop content lines being too long. You are also squishing your images which is really bad. Never squish an image as you always need to maintain its aspect ratio. This can be done simply by setting the height of the image to auto when you change the width. The browser will then maintain its aspect ratio.

1 Like

Okey, It works well, but I am wondering how to make a home section underlined from the opening of the page, because right now i need to click it to see the line. And also if it possible to make it worked during normal scrolling of the page, by detecting section in some way? + I changed the height of photos to “auto”. Thanks a lot for your tips and answers.

Just add the active class in the html for the home link to start with.

e.g.

<a href="#home" class="smoothScroll active" … etc

1 Like

Ty a lot for your answer. Could you also give me an advice how to show the underlining basing on the current section? e.g. when I am scrolling by not using the navbar, the underlining does not work. How to solve it and recognize the anchor?

I probably managed the issue with navbar. Could you give me some help or tips to how to adjust the resolution for this website?

You would need some complicated JS to detect when the target element has scrolled into view and then move the active class on the nav. You would have been better finding a plugin/script that did all those things by default rather than trying to write from scratch.

It’s not as simple as that as you need to manage your content consistently and with the intention of allowing it to resize to the window as required.

Also at the moment you are letting most elements go full width which I think is too wide for your content (apart from the hero image at the top).

Consider adding a wrapper around the content sections and set them to a max- width that suits the design (probably around 1280px or thereabouts), You can let the coloured background go full width but that means adding an inner div with a max-width of 1280px amd margin:auto to center it.

Next in your ‘offer’ section find all the instances where you have used relative positioning to move stuff around and remove the positioning because you should never use relative positioning like that. It’s causing all sorts of problems and scrollbars and makes it impossible to have a fluid page.

You should be looking at auto centring those offer sections which could be done by creating them as inline-block elements (with percentage widths) and then on a parent wrapper div use text-align:center to center the blocks. Margins can be used to space them apart from each other.

On smaller screens throw in a media query and make the offer boxes only one across instead of 2 across. You create the media query at the appropriate width and change the element’s display to block and change its width to auto. Add any other tweaks appropriate for the width at which your elements need adjusting. It’s a rinse and repeat process.

You really need to work on one section at a time as you have too much on your page already and it seems to me that you have lost control somewhere along the way :slight_smile:

I can’t offer quick fixes as this really is a re-build process and you will have to work on one element at a time but will be complicated because the rest of the items on the page are inconsistent at the moment and make it awkward to really see how the element you are working is really behaving.

Take a deep breath, jump in and try to simplify the code or at least take a more consistent approach.

5 Likes

Thanks a lot for your answer! I just solved a problem with blank area around the website and now I will remake offer section.

1 Like

Thanks a lot for all the help here. Could I ask you to delete the site’s name from the first post in the thread?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.