- This topic has 23 replies, 3 voices, and was last updated 7 years, 10 months ago by
Nancy.
-
AuthorPosts
-
June 16, 2016 at 10:14 am #93669
Nancy
ParticipantHi, the fluid layout didn’t work out as my friends said in some of their browsers the whole header did not show. They had to scroll over to see it.
So I switched to the boxed layout. The border color around it does not work for my header well.
I would like to remove the entire border with the exception of a thin line below the menu to separate it from the post page.
Also, I would need to extend my header image and menu to fit properly over the content. Can you guide me?
Thank you,
NancyJune 16, 2016 at 10:55 am #93675Mahesh
Participant@inmercyrejoice: Please post in your site url.
Regards,
MaheshJune 16, 2016 at 12:24 pm #93676Nancy
Participantoops sorry. http://slaveryshatterslives.com/
June 16, 2016 at 7:06 pm #93711wensolutions
ParticipantHello @Nancy,
For all your requests above, please copy and paste the following Custom CSS in your
Child theme’s style.cssTo remove border across the content box
#page.hfeed.site.container { border: none; }
To extend header image fullwidth to fit the container
.site-layout-boxed #masthead{ padding: 0px; }
To extend to fit menu to the container
#site-navigation { float: noe; }
Hope this helps you!.
June 16, 2016 at 10:41 pm #93714Nancy
ParticipantThank you very much. It worked. But how do I remove border over the header so that the header is flush?
June 16, 2016 at 10:53 pm #93720wensolutions
Participantremove border over the header
Being specific can you please spot this line meaning ‘border’ in the screenshot ?
Or, if you mean to remove the space just above the header image then yes it is possible from following CSS trick.
#page.hfeed.site.container{ margin: 0px auto; }
Let us know if this is not the case. Thanks
June 16, 2016 at 11:03 pm #93721Nancy
ParticipantYes sorry, that is what I meant and it worked. It never ceases to amaze me how quickly you respond and resolve issues to help me make the website just how I like it.
Again, thank you very much.
June 16, 2016 at 11:07 pm #93722wensolutions
ParticipantNo problem. Glad that it worked 🙂
September 23, 2016 at 10:13 am #100041Nancy
ParticipantThanks so much for your patience.how can I remove the space between the header and the menu? Also, the background color for the sidebar?
September 23, 2016 at 10:15 am #100042Nancy
ParticipantSorry to bother you again, but I tried changing the background color and it didn’t work. Also,the menu background is crooked
September 23, 2016 at 10:55 am #100050wensolutions
ParticipantTo change the background color of the menu, you can go to
Dashboard -> Appearance -> Customize -> Color Options -> Color Settings -> Primary Menu Color Options -> Menu Background Color.To change the background color of the sidebar you can go to
Dashboard -> Appearance -> Customize -> Color Options -> Color Settings ->Sidebar Color Options -> Background Color.To reduce the white space between header image and menu the below given css will help, also we would like you to suggest you that your #sitenavigation custom CSS seems to have an invalid property value of float so you can also add the below given custom css to
Dashboard -> Appearance -> Customize -> Theme Options -> Advanced Options.
(If you do not want your menu to float to left you can remove the float: none; part. )#site-navigation { margin-top: -5px; float: none; }
Hope this helps !
September 24, 2016 at 12:09 am #100124Nancy
ParticipantI reinstalled WP and started from scratch. I have everything figured out except how to remove border between header and menu bar under it. Also, the menu bar background is crooked.
September 24, 2016 at 1:16 am #100135Nancy
ParticipantMy site is not showing up on Firefox and it has different color on Microsoft Edge. Google has the colors that I chose
September 24, 2016 at 2:41 pm #100161wensolutions
ParticipantHi Nancy,
We are trying to answer on your current issues below.
how to remove border between header and menu bar under it.
#site-navigation { margin-top: -5px; /* removes top border i.e. white space */ } #site-navigation ul li a::after, #site-navigation .current_page_item a:after, #site-navigation .current-menu-item a:after{ background-color: none; /* removes menu border bottom */ } #site-navigation .current_page_item a:after, #site-navigation .current-menu-item a:after, #site-navigation ul li a:hover:after{ background-color: none; /* removes menu border bottom on menu hover as well */ }
My site is not showing up on Firefox and it has different color on Microsoft Edge.
For us, your site is normally displaying as when checked in FF and MS Edge.
You can correspondingly verify against an actual demo of the theme http://demo.wenthemes.com/wen-business-pro on your browser as well since this is not an issue with the theme.
September 24, 2016 at 9:40 pm #100164Nancy
ParticipantThat’s good to know about Edge and Firefox. Firefox is broken on my end, so I figured that out and uninstalled it.
Thank you for you help once again. The only problem I have left is that the menu bar is jagged on the bottom. I am not sure how this happened.
September 24, 2016 at 10:29 pm #100165wensolutions
ParticipantDid you paste above given custom CSS in your Customizer theme options ?
They should remove the white space between header image and white bars of each menu.
Also as we check your browser source code that has error in floating the menu to left previously given. ( not sure whether you have intentionally set the menu to float to the right).
Anyways, to start the menu from left, paste this code :
#site-navigation{ float: none; }
Thank you
September 24, 2016 at 10:47 pm #100167Nancy
ParticipantI honestly didn’t intentionally do that, but I applied the code. The problem is the the black menu bar is jagged on the bottom
September 24, 2016 at 11:42 pm #100171Nancy
ParticipantIs there a way to make the slider vertically smaller? Sorry to keep bothering you. It’s just that I am trying to rebuild this site again.
September 25, 2016 at 10:39 am #100191wensolutions
ParticipantSure, we understand your problem and trying our best to assist you.
You can adjust menu to extend to fullwidth removing white space in left.
#site-navigation{ float: none !important; }
Next, we see you have actual slider disabled from theme option and instead showing custom header image.
Assuming, you want to reduce height of current header image there are two options.
Option I :
Crop while you upload the header image from Customizer. You get cropping tool in the uploading process. This way you can crop to less height.
Option II :
To adjust header image height through custom CSS.
#custom-header img{ height: 264px /* adjust this numeric value to your own */}
Adjust image height such that it do not appear skewed.
Thanks.
October 15, 2016 at 9:44 am #101507Nancy
ParticipantI cannot find where to post a new subject. My question is how to I remove the rust line in my posts? It can be distracting as it breaks up paragraphs as well. Thank you in advance.
-
AuthorPosts
- The topic ‘Border around Header in Boxed layout’ is closed to new replies.