写文章
夜光巴比
2016-04-07 12:23

【Avada女神经】高大上的透明导航是怎么实现的呢?

一直在整理Avada相关的系列帖子,问题征集和汇总贴在此,方便大家全面点赞,哈哈……

(积分让脸皮都变厚了……)Avada问题征集贴——包含问题回复帖子传送门儿


好久没当女神经来叨叨建站的问题了……其实笔记记了一大堆,自己能看懂也能操作,但就是好懒得写帖子(来打我呀~~~)主要是对很多刚接触的同学来说,发帖子需要准备素材才能说得明白,否则很容易看得一脑袋浆糊,哈哈……

原来的习惯是充分迎合我的最大特质——懒,只是在群里回复的时候按思路截图完了直接去发贴的,特别是很多同学问的FAQ的问题,我又不是个愿意做重复功的人,所以烦了之后就会整理出来各种上链接了,哈哈……

不过也希望,能这样折腾和整理的小伙伴儿越来越多,建站技术本身虽然之于米课的大框架来说,不是特别有战略意义的,但对很多小伙伴儿来说却是极大的绊脚石,特别当大家学完课程之后在缺乏整体营销意识的情况下又遭遇外包滑铁卢的时候,建站对很多东西来说是不得已的选择……如果我们每个人都能把自己踢过的石头整理出来,并分享给大家,这条路慢慢儿走起来也就会不那么难过了……


OK,不叨叨,上今天的主角……Avada Header Transparent

Avada_Transparent_Header.jpg

很多东西对这种透明的导航都会比较感兴趣,它能使本来并不丰富的导航样式融入到大banner之中,让印入客户第一眼的黄三角内容变得更加漂亮和谐……可是,咋做的呢?

其实,并不难……

只需要编辑你想做透明导航的这一页,在下面的Page Option里找到Header标签的设置,把Background Opacity设置为0即可……

Header_Background_Opacity.png

(P.S.如果你还不知道Page Option是啥,这篇快速熟悉主题的文章可能需要看下咯)

一般情况下,大部分的网站经常只针对首页做这个设计,当然,如果你有特别的设计,全站的导航都想设置成透明的,请去Theme Option的Styling下找答案:

Background Colors-Header Background Color and Opacity-0 Opacity

Styling_Header_Background.jpg


对于像刚刚的Avada demo上的简单的导航来说,这样的一步设置就ok了……但这个设置仅针对于大家在选择下面儿的Header Layout时的第一个style……

Avada_Header_Layout.png

但有很多同学的内容是需要有像Ramboo Tech一个做个顶部导航的,大家可以试一试,如果你选择了有Top Menu的顶部导航的样式再设置透明样式的时候就会出问题了……自己试下看,是不是丑丑哒?

加入顶部导航的问题.jpg

(刚发完想喘口气儿,就有同学在群里问了,现成的素材借用下了,出于保护在邮箱和logo上打了马赛克,大家忍着看吧)

图里一旦加入了顶部导航,主导航部分的背景确实还是透明的,但顶部导航和主导航的border木有变透明,粗来捣乱了……

喘完气儿的我抄来了一段儿代码……有这个问题的同学可以把代码加到Theme Option的Custom CSS里来解决这个问题:

body.home .fusion-secondary-header {background: rgba(20,19,17,0);}

——这条的作用是把顶部分导航的颜色变变变透明……

body.home .fusion-secondary-header, body.home .fusion-header {border: 0 !important;}

——这条的作用是把顶部导航和主导航的边框去掉……

代码加进去之后保存,顶部导航和边框就都是透明的了……

如果只想把主导航变透明,可以只加这个代码(只去掉主导航的边框):

body.home .fusion-header {border: 0 !important;}


另外,现在还有同学对Demo看的比较多,也喜欢上了这种banner的设计方法……取消掉好多页的slider功能来提高金三角的显示速度,也用比较高大上的style来聚焦用户的眼球到定位性的内容上来提升第一印象……在这种情况下,如果不用slider而且直接上了正文的内容,也会有很邪恶的问题,让强迫症不能忍……


这又要怎么办咧?

最近邪恶的我比较喜欢大喘气儿和Bazinga,哇哈哈……容我再喘口气再Bazinga闪现吓出一个来,哇哈哈……


工作去先……

关注作者,看更多TA的好文章 个人展示
夜光巴比 谁在评论里提醒下这位作者,懒得连名片都没填写。
举报
收藏
转发
0/500
添加表情
评论
评论 (20)
最近
最早
3天2夜学会建站

夜光巴比

还记得大明湖畔的容嬤嬷吗?对的,就是我,啊哈哈……千万不要跟我聊,否则,你不一定会笑还是会哭……当然,作为一个集逗比与高冷于一身的……逗比,我想说原谅我这一生不羁放纵笑点低,天生逗比难自弃~~哇哈哈

向TA提问
置顶时间 :

设置帖子类型

普通
新闻
活动
修改

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示