CODEWITHSUNDEEP
htmlcsssemantic-ui
user3204934
user3204934

Reputation: 545

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/

Upvotes: 0

Views: 6500

Answers (3)

Mordred
Mordred

Reputation: 3941

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.

Upvotes: 2

Walt
Walt

Reputation: 77

You can use flexbox for it. But don't forget to include all prefixes for different browsers support.

.cont {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet"/>
<div class="ui fixed stackable borderless blue inverted menu grid">

  <div class="item three wide column cont">

      <img src="http://semantic-ui.com/images/logo.png" class="logo">

    
  </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>

Upvotes: 1

Bhupinder kumar
Bhupinder kumar

Reputation: 556

add this css for this 

 .ui.menu .item>img:not(.ui){
        border: 1px solid;
        float: right;
        position: absolute;
        right: 0;
        top: 11px;
    }

Upvotes: 0

Related Questions