Member Avatar for anestistsoukalis

Recently i've posted a question on how could i possibly attach an image on top of my navibar menu. I did it thanks for help. Now i am facing with another issue. What if someone who is on my site presses Ctrl + ? And zoom in ? or zoom out? Then my picture is going to flow left or right. i want it to stay fixed position. like a pinned image. Or sth like that. I tried to put php code inside a div but it didn't work. So what can i do for it ?

Edited by pritaeas because: Moved.
  • 4 Contributors
  • 10 Replies
  • 206 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by mmcdonald

Dani AI

Generated

Quick summary: this is a layout/CSS issue, not PHP — earlier replies from , and pointed that out. The reliable way to keep an image "pinned" to the nav while the page is zoomed is to make the image part of the same positioning context as the nav and use responsive units. Two practical approaches follow.

HTML + absolute-positioned child example:

<nav class="main-nav">
  <ul class="menu"> ... </ul>
  <img src="/path/badge.svg" alt="" class="nav-badge">
</nav>

.main-nav {
  position: relative;   /* positioning context for the badge */
  height: 56px;         /* example; actual nav height can be responsive */
}
.nav-badge {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;        /* use rem/%, not px */
  height: auto;
  pointer-events: none; /* optional: keep badge non-interactive */
}

Background-image alternative (no extra DOM element):

.main-nav {
  background-image: url('/path/badge.svg');
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  background-size: 2.5rem;
}

Practical tips and gotchas: prefer SVG or high-res images so the graphic stays crisp when zoomed; use relative units (rem, em, %) so placement scales with text and layout; ensure the badge element is inside the nav and the nav has a positioning context (position:relative) and a defined height or alignment (flex align-items:center works well). Avoid trying to disable browser zoom (bad for accessibility). If odd drifting still happens, common causes are the image being outside the nav, floats/clearing issues, or percentage-based margins that reflow differently under zoom — debugging helpers are full nav HTML/CSS, the container rules, and a screenshot of the misalignment.

Recommended Answers

All 10 Replies

Member Avatar for phorce

For a start off: This really isn't a PHP related question since it has more to do with CSS. I don't know why you're using PHP, unless, you are generating or rendering the image.

Post some code, otherwise, we cannot help.

Member Avatar for mmcdonald

Phorce is correct, this has nothing to do with PHP and will most likely be moved to CSS soon. However, wrapping your image in div tags and setting the nowrap style could solve your problem:

<div style="white-space: nowrap;">
    <img ... />
</div>

I would of course create a CSS class rather than use inline styling but the code above is just a demonstration.

Michael

Member Avatar for anestistsoukalis

It didnt solve the problem :-(

Member Avatar for mmcdonald

You're going to need to add the code, the whole navbar including the image you've added please (Not the actual image, just the code used to insert). Only then can I see where the CSS should be applied.

Member Avatar for Member #949455

What if someone who is on my site presses Ctrl + ? And zoom in ? or zoom out? Then my picture is going to flow left or right. i want it to stay fixed position. like a pinned image. Or sth like that.

Like what Phorce mention is correct. It's not really related to PHP at all.

I assume you are using @media queries in your CSS. That will resolve the issue you are having by setting the image position and size when you zoom in and zoom out any mobile/tablet device

Does that make sense?

Member Avatar for mmcdonald

@LastMitch - you keep mentioning mobile devices in CSS topics when none of the topics relate to mobile devices, can I ask why?

Member Avatar for Member #949455

you keep mentioning mobile devices in CSS topics when none of the topics relate to mobile devices, can I ask why?

Base on what OP said. What would be your answer? The first thing that would pop out from my mind would be a mobile device zooming in and zooming out.

Edited by Member #949455
Member Avatar for mmcdonald

OP said:

What if someone who is on my site presses Ctrl + ? And zoom in ? or zoom out?

OP is talking about zoom regardless of device or browser, he's trying to keep an image stuck in one location by the sound sof it (To the nav).

Member Avatar for Member #949455

OP is talking about zoom regardless of device or browser, he's trying to keep an image stuck in one location by the sound sof it (To the nav

But yes, that true, it's more technical issue than a code related. If OP wants a image being in one location but then it's CSS not PHP.

Member Avatar for mmcdonald

Don't worry, I flagged it hours ago for a category change xD OP: you need to look into positions on the image and the wrap of the image too.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.