Need customization help with logo, widgets and few other things on Edin theme

  • Unknown's avatar
    nataliemarcelllaw · Member ·

    Hi I need some help with a couple of things on my website that I have been trying to customize but haven’t been able to figure out.

    1. I want my logo to be centered. I’ve managed to get it to float a little over from the left, but it is not centered when website is viewed on a PC. On a phone or tablet it does appear centered. I managed to move it over a little more but then the logo completely disappears when website is viewed on cell phone.

    2. I want my main menu that appears right below the logo to be centered as well. It looks slightly off on PC view. I’m thinking of adding another page to that main menu, and that will really make it look off. Is there a way to make it center?

    3. Is there a way to make it so that on PC view, when you hover over the menu pages it does not highlight the page you are hovering over?

    4. The bottom footer widgets don’t look right on PC viewing. I have a text widget on the first footer widget area with my contact info. I have this text aligned center. I have nothing in second widget area in middle (just empty text box). The third one on the far right is my social links. I also have this one aligned center but when you look at them it actually looks like the third one is aligned right or it’s too far left. I’ve tried changing the third widget box to align right to see if it helps but that changes all of them. I’ve tried adding padding to make it look better, but these don’t align center when viewed on a phone or tablet.

    5. Bottom footer text (copyright and website terms & disclaimer) look off as well on PC viewing. The copyright is just text I added to website WordPress credit and the Website Terms & Disclaimer is a secondary menu. How do I get both of these to appear somewhat aligned so that they look like they have same distance from edge of page. Right now it looks like the copyright text is too far right and the Website Terms & Disclaimer is too far right as well.

    Thanks in advance for all of your help with this. It has been a learning experience to get to what I currently have and I’m really happy with it, just need these last few changes and I’m all set.

    My website address is: http://www.nataliemarcelllaw.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. I want my logo to be centered.

    2. I want my main menu that appears right below the logo to be centered as well.

    Add this to the bottom of your custom CSS. I’ve used a Media Query to limit this to 1020px and wider screens as below that the the touch device menu activates and with the logo centered, it pushes the menu icon down below the image off to the right. 

    @media screen and (min-width: 1020px) {
.site-branding {
	margin-left: auto;
	margin-right: auto;
	float: none;
	text-align: center;
}
.site-branding .site-logo {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.primary-navigation {
	float: none !important;
	text-align: center;
}
.primary-navigation ul {
	display: inline-block;
}
.primary-navigation .menu-primary {
	margin-bottom: -10px;
}
}

    3. Is there a way to make it so that on PC view, when you hover over the menu pages it does not highlight the page you are hovering over

    Yes we can do that with the following. Menus are typically designed to do that to aid visitors and let them know that they are solidly on the menu item. For the background , you may wish to try a very light grey. You can substitute #eee for #fff and see if that works for you. 

    .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li > a:hover {
  background: #fff !important;
  color: #000;
}
  • Unknown's avatar
    thesacredpath · Member ·

    4… The third one on the far right is my social links. I also have this one aligned center but when you look at them it actually looks like the third one is aligned right or it’s too far left.

    Add the following to the end of your custom CSS. What I’ve done is to target that menu widget specifically by using the widget CSS id for it. See what you think with this. It’s still not perfect, but given the small size of the icons, and there being only three of them, it’s going to be a challenge to get them further to the right. I tried increasing the size of the icons, but things go awry. It make take a bit of time for me to figure out what is going wrong on increasing the size. 

    #nav_menu-3 {
	float: right;
}

    5. Bottom footer text (copyright and website terms & disclaimer) look off as well on PC viewing. The copyright is just text I added to website WordPress credit and the Website Terms & Disclaimer is a secondary menu. How do I get both of these to appear somewhat aligned so that they look like they have same distance from edge of page. Right now it looks like the copyright text is too far right and the Website Terms & Disclaimer is too far right as well.

    This is challenging, and I don’t think there is a way to center the two blocks on each side and keep them that way. Add the following, which centers everything, to the bottom of your custom CSS and see what you think. 

    .site-info, .footer-navigation {
	width: 100% !important;
}
div.site-info {
	padding-bottom: 0;
}
  • Unknown's avatar
    nataliemarcelllaw · Member ·

    Thank you so much! The coding for items 1-3 worked like a charm. I went ahead and tried the coding for item 3, which looked better on PC view, but threw it off on cell phone and tablet mode. I’ve actually moved both widgets 1 and 3 into the middle widget area (widget 2). For some reason the text widget is not as wide as the custom menu widget with the social links. Everything still looks a little too far to the left, especially the social links. Would it be easier to fix this way? (Can I make widget 2 area the full width of the page so that the text and social links align better?)

    As for item 5, I tried the code you suggested and it does make the wordpress credit logo and copyright look better, but it scrunches up the “Website Terms & Disclaimer” too much. I’ve removed the center alignment so each is aligned to their corresponding side. On PC view I think it looks a lot better. On cell phone view they both align left, not the best, would prefer for them to align center, but this will do.

  • Unknown's avatar
    nataliemarcelllaw · Member ·

    I think I might have actually figured it out.

    Last question though, is there a way to get rid of the ellipsis button that prompts viewers to log in or sign up? Appears at the bottom right of the site when you scroll down and hover in that area. (svg.gridicon.gridicon_ellipsis)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, glad you figured it out. On the actionbar at the bottom right, I see you have added the following custom CSS to hide that. 

    #actionbar {
	visibility:hidden;
}

    If you have additional questions, please let us know.

  • The topic ‘Need customization help with logo, widgets and few other things on Edin theme’ is closed to new replies.