Community Forums › Forums › Archived Forums › Design Tips and Tricks › Eleven40 Pro Header area – 2 questions
Tagged: Eleven40-Pro, header background, header image, Logo, site-header
- This topic has 5 replies, 3 voices, and was last updated 7 years, 9 months ago by palakshah.
-
AuthorPosts
-
April 19, 2016 at 11:58 pm #183969jbabbParticipant
I am using the Eleven40 Pro child theme and have a few questions regarding the header area. What I am trying to accomplish is making the header are of this site match with materials the client currently uses. I need to use a specific (unobtrusive) background with a logo to the left and a small image to the right - and separate from - the logo. The image needs to be just about centered in the header area. So here's what I've tried so far:
1. I added css code to use a repeating image as a background in the header area. It looks fine but I noticed on the mobile view that the background also shows behind the mobile drop down menu and it looks terrible. Is there code that would remove that image from the mobile and tablet view and just show it on desktop view?
2. I have added the left-aligned logo, but don' know how I can add the additional image. Is there a way to add a center widget to call that image? Or, alternatively, can the left logo widget area be increased in size without having negative effects on mobile or tablet view? If this were workable, I can do a new logo file that includes the additional image but I'm not sure what then happens on mobile view.
Hoping someone has some ideas!
Thanks.April 20, 2016 at 6:28 am #183976Brad DaltonParticipantI assume you want a (1) background image which covers the full area of the site header
(2)Then a logo floated left and (3)another floated right, both of which are playered over the background image?1, Yes, wrap the CSS rule in a Media Query and use display: none; to hide it.
2. You need Media Queries to control the CSS rules used to style different elements on different sized screens.
Look at the end of the style.css file for examples of how to use Media Queries.
Also, link to your site please when asking questions relating to CSS so someone can inspect the elements in question.
April 20, 2016 at 11:06 pm #184040jbabbParticipantThank you for the info. You are mostly correct in what I am looking to do. Yes, I am using a repeating image to cover the full area of the site header. Logo floats left but the menu floats right and I need a third area to use a centered image with all elements layered on top of the background image. Currently, Eleven40 has two areas - logo left and menu right. It's that third (center) area that has me befuddled. Might there be a way to add the third area?
1) and 2) - I have not worked specifically with Media Queries before so I thank you for pointing me in the right direction.
Sorry, I'm unable to post the website as it's on a private development server right now but I do understand that would make it much easier to obtain help.
Thanks again.
April 21, 2016 at 7:11 am #184058Brad DaltonParticipantYou can add the image to a text widget in the header right widget area and float it left. You can also extend the width of the header right widget area by the same amount you decrease the title area.
April 21, 2016 at 9:15 am #184076jbabbParticipantNot sure why, but it never occurred to me to just add an image to the current widget area that holds the menu and just float it left. Thank you for the suggestion!
June 10, 2016 at 2:48 am #187312palakshahMemberhi i am using Eleven40 theme to my site Admitcards Result but i can't add advertise below menu bar.
Thanks in advance
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.