0

I would like to place the Syndication Feed Module in its simpliest form (only its icon), at the end of the top-menu of a site (position-1 of the protostar template). Unfortunately, when affected to position-1, the module appears on a new line below the menu items.
Does anyone have an idea of the nicest way to do that ?
Help would be greatly appreciated.
Here is what I get: Here is what I get

2 Answers 2

1

Here is your solution:

For you nav element add this CSS:

ul.nav{
    display: inline-block;
}

For your feed link add this CSS

a.syndicate-module{
    float:right;
    line-height: 34px;
}

If you want the feed icon to be left aligned to the menu instead of floating to the right change the CSS to this:

a.syndicate-module{
    display: inline-block;
    vertical-align: top;
    line-height: 34px;
}

Image links for you to see the difference:

Left Aligned

Floated Right

8
  • This pulls the icon to the right but it is still in a line below the menu. I guess I need somthing that inhibits the clear:both that must be at the end of the CSS of the menu...
    – jcm69
    Feb 10, 2016 at 13:18
  • Can you give us a link to look at? You may have to adjust the CSS for a couple of elements. I can take a peek if you have a URL you can share.
    – Terry Carter
    Feb 10, 2016 at 16:18
  • I have edited my answer with the CSS to fix your alignment.
    – Terry Carter
    Feb 12, 2016 at 22:18
  • Added to image links as well.
    – Terry Carter
    Feb 12, 2016 at 22:23
  • Many thanks for your help ! It almost works but if narrow the window so as for the top menu to take 2 lines (or if I add enough items to the menu), the RSS icon is pushed down out of the menu, below the horizontal line. Strange... Sorry.
    – jcm69
    Feb 15, 2016 at 17:28
1

Following Terry idea, I finally got it! The idea is to use display:inline-block for both ul.nav and a.syndicate-module and also to give a width to ul-nav.
The menu can then have as many lines as he wants, the RSS icon will be displayed on its right.
So:

 ul.nav{
     display: inline-block;
     width: 50%; /*to have a menu with many lines, 98% is the right value*/
 }

and

a.syndicate-module{
    float:right;
    vertical-align:top;
    display: inline-block;
}

gives: The menu with many lines and the RRS icon on the right

Many thanks Terry, could not have found this without your help !

1
  • Glad I could help.
    – Terry Carter
    Feb 17, 2016 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.