-1

I have a site that I want to add a top bar into, like in the following example: http://demo.codesupply.co/ however I don't want to use an iframe and I cannot amend the current css of the site. I need to be able to create a new div with its own classes that sticks to the top of the site, however my site has got a position:fixed; top:0; navigation bar which is placed on top of the site as well, then they overlap.

How can I place my new top-bar on top of the entire site, without any other element covering up?

*I still cannot see the reason for the downvote, it is a totally legitimate question.

human
  • 686
  • 3
  • 9
  • 24
  • so, if you can't change the css of the page, then what good would it do to add classes to it? Anyway, you could add a new div with 100% width, also position fixed and top 0, but with a higher z-index than the navigationbar to cover it. Is that what you mean? – Tularis Mar 05 '17 at 19:19
  • I am adding a WordPress plugin that will inject this top bar to any site, so the original site cannot be amended, that is what I meant. A z-index will still cause them to overlap my top-bar with any potential position:fixed; top:0; element on the site. I want my top-bar positioned on top of the site, and then the entire site underneath my top-bar, basically simulating the example provided without iframe. – human Mar 05 '17 at 19:57

1 Answers1

0

If you don't have access to the CSS then you can use inline CSS and use a 'PUSH' method that does what it means, it pushes the content down the page, so its not overlapping. JsFiddle here: https://jsfiddle.net/SimonHayter/090ar1u0/

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;>
  Hello, I am Menu, nice to meet you.
</div>
<div style="height:40px;width:100%;">
  Let's push the page down 40px, you can't see me!
</div>
<div>
  Existing Content
</div>

Or you could just edit the existing HTML to add margin-top, i.e:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;>
  Hello, I am Menu, nice to meet you.
</div>
<div class="container" style="margin-top: 40px;">
  This is where your existing content lives.
</div>

If you dislike inline CSS then you can simply add a <style> after the body in HTML5, like so:

<body>
    <style>
        .menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%; 
            height: 40px;
        }
        .container {
            margin-top: 40px;
        }
    </style>
    <div class="menu">
      Hello, I am Menu, nice to meet you.
    </div>
    <div class="container">
      Existing Content
    </div>
</body>

If you don't have access to the HTML either then you can use Apache to Modifying static content using a CGI script.

Community
  • 1
  • 1
Simon Hayter
  • 3,131
  • 27
  • 53
  • This won't work because elements with `position:fixed;` will overlap my top-bar as shown here: https://jsfiddle.net/b8p5ckvc/ – human Mar 05 '17 at 20:00
  • Then don't use `top: 0` on your menu, use the height of the bar above it... i.e https://jsfiddle.net/SimonHayter/b8p5ckvc/1/ or use `` – Simon Hayter Mar 05 '17 at 22:08
  • Another JSFiddle this time with style overrides https://jsfiddle.net/SimonHayter/b8p5ckvc/4/ – Simon Hayter Mar 05 '17 at 22:21
  • Thank you it was helpful, unfortunately, as I said I cannot amend the original site, I can only style the top-bar element. – human Mar 05 '17 at 22:33
  • You can't have two elements using `position: fixed; top: 0;` if your able to add a element then your able to add ` – Simon Hayter Mar 06 '17 at 09:46
  • You are **wrongly assuming** that I simply don't want to do something rather that I cannot. It is clearly stated in my question: _I cannot amend the current css of the site_ and there is a good reason for that, which is stated in a reply in my question. _deleted irrelevant downvoting part_ – human Mar 06 '17 at 11:35
  • The assumption that I downvoted you was not necessary or correct. – Simon Hayter Mar 06 '17 at 11:37
  • Furthermore you wrote `so the original site cannot be amended`... your editing the original site if you like it or not by injecting HTML, I dont see the problem in you also adding `body { margin-top: 40px; } `. or any thing else for that matter, it won't effect their design unless of course, some sites don't have fixed bars. – Simon Hayter Mar 06 '17 at 11:40
  • Apologies for assuming so. – human Mar 06 '17 at 11:40
  • But the nature of a WordPress plugin is to be installed and used on any site, that I don't know its css nor html beforehand, so there is no way for me to edit the original source code simply because I don't know what it will be. – human Mar 06 '17 at 11:44
  • Sadly, I don't think it can be done then without knowing what type of sites your coming to come up against, thats why many use iframe in the first place. – Simon Hayter Mar 06 '17 at 11:50
  • I see, I couldn't find a way myself, that is why I came here to ask if someone wiser than me knew a way. Anyway, I really appreciate your help, effort and time invested, thank you very much. – human Mar 06 '17 at 12:01
  • Btw, what is stopping you from using the Z-index with position:absolute;top:0 ? – user3526204 Mar 06 '17 at 12:27
  • check this out http://stackoverflow.com/questions/16362113/how-does-z-index-and-position-fixed-work-together-in-css – user3526204 Mar 06 '17 at 12:31
  • z-index will just overlap the existing menu bar. OP wants to use 2x fixed positions with top:0;, it can't be done. – Simon Hayter Mar 06 '17 at 13:31