css 如何在Shopify Dawn主题的标题区域中将语言选择器按钮设置为搜索图标列表上方?

iyfamqjs  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(119)

大家好,我不是一个编码器,我试图修补的东西在一起,因为我发现他们在网上,但我似乎找不到一种方法来做到这一点,我想移动谷歌翻译选择器上方的搜索图标列表位于右上方的标题区域时,在桌面和平板电脑模式下,它看起来ok-ish在移动的现在,你可以看到它在网站上现在在这里:https://convomediagroup.com
enter image description here现在在桌面上的样子
enter image description here移动的看起来像什么
这是我现在拥有的谷歌翻译选择器的css代码

/* Fab google translate button CSS Code */
.fab-wrapper {
  position: fixed;
  top: 0.5rem;
  right: 1rem;
}

但是我不确定CSS是否是这样做的方法,也许在头代码中有更好的方法来做到这一点?我不知道该怎么办有人可以告诉我在哪里移动谷歌翻译代码,有它上面的图标列表显示在右上角的标题区?
谢谢

aydmsdu9

aydmsdu91#

您可以使用绝对定位来实现这一点。我们必须考虑填充大小,因此我们在移动的上使用right: 1.5rem,在桌面上使用right: 5rem

header.header--has-menu {
  position: relative;
}

.fab-wrapper {
  position: absolute;
  right: 1.5rem;
  top: 2rem;
}

@media screen and (min-width: 990px) {
  .fab-wrapper {
    right: 5rem;
  }
}

相关问题