user3204934 user3204934 - 26 days ago 11
CSS Question

Move logo to right

I am trying to move logo to right but it doesn't move.

HTML:

<div class="ui fixed stackable borderless blue inverted menu grid">

<div class="item three wide column">
<img src="http://semantic-ui.com/images/logo.png" class="logoright">
</div>

<div class="item ui search eight wide column">
<div class="ui icon input">
<input class="prompt" placeholder="Common passwords..." type="text">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>


CSS:

.logoright {
text-align: right !important;
}


I have also checked
ui small right floated image
and
right aligned
but no one seems to be working.

I want to move image to the left-most of search bar NOT at the end of the nav bar.

https://jsfiddle.net/n55mwbg1/1/


Answer

You can just do this:

.logoright {
  margin-right: 0px !important;
  margin-left: auto !important;
}

Fixed jsFiddle

The !importants are needed because your .ui.menu .item>img:not(.ui) selector is setting the margin and it's a more specific selector so it overrides the .logoright selector. If you specified an id for the img, and used that as your selector you could avoid the !importants completely. Might make more sense if you're only going to use this on a menu-bar.

Comments