Top Bar help required

Classic Stacks
1

Re Top bar in foundation
Hi is there anyway of making my Logo stay at 120px wide by 140px deep and not be cut of when the screen reduces to a mobile screen, or to put it another way is there any way of keeping the Top bar from narrowing down on smaller screens. I have tried a 2 column stack approach, and the css method
.top-bar .title-area img{
width: 120px;
height: 140px!important;
}
But as the screen size reduces it is cut off.
I have tried using target but it still gets cut off and by using float it gets little bit annoying to say the least.

2

can you share a url to the page?

3

Sure Scott https://dernalandscapes.me.uk/

4

I’m not 100%clear on what you are after but here is an article by @tav that will get you started:

You can also “overflow” the topbar with the logo if that’s what you are after, let me know, I have some CSS laying around somewhere to do that. like on this page

5

Many thanks Scott I ain’t so good at explaining what I want, but if you take another look I have put the oversized image in now and if you bring the side in of the window you are just left with the top of the image showing like so

image
image1448×721 134 KB
.
All you can see is the top of the logo

6

It looks like you have set a fixed height to the logo image. You should override the width and let the height scale automatically.

You should also then wrap this inside a media query so that the code does not take effect on the mobile menu (it won’t work with that because of the way that the dropdown menu works).

You seem to have attempted to set the top-bar{height:auto!important} which you SHOULD NOT DO with the current version of Foundation. This will cause the mobile dropdown to always be shown (as you see on your page). Similarly, do not try to use overflow:visible to get the logo to overflow, this will also result in the dropdown menu being shown continuously.

@media screen and (min-width:640px){
   .top-bar .name img{
      width:120px!important;
      height:auto!important
   }
}

You also have a serious syntax error from the JS code that you have pasted on to the page - remove the <script> tags from the code if you are pasting it into the site wide JS code area.

7

Many many thanks Andrew, tav if I maybe so bold, for your guidance and for the js code advice, I have deleted the tags I had pasted them into the sidebar html code area. I really do appreciate any help this old 69 year old stubborn fool can get I expect there are thousands of errors on my site which is probably why i don’t get noticed by google etc!.
The Logo still doesn’t work quite how I would have liked but have added the code to all the pages

8

Regarding the script tags here is the rule:

  • No script tags if you are pasting the script into a code area labelled Javascript (site wide or in the page inspector)
  • Use script tags if you are pasting into the head or any other area

So in your case, the script tags were causing a problem where they were in the site wide JS code area and should have been removed.
Now you have moved the script into the sidebar HTML code then they are needed again. This however is probably not the best place it. Put it in the Javascript or Head areas if you don’t want it site wide like it was.

The simple reason for these rules is that the Javascript areas already place the script tags in the code for you (around anything that you type into the editor area. By putting script tags in your code, you are therefore inserting script tags within script tags which is invalid and will cause an error.

9

That would be really cool if you could the site is amazing
Graham

10

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