How to change nav bar and footer colour in Adelle Theme

  • Unknown's avatar
    gilliancut · Member ·

    Hello!

    I am looking to change the colour of the nav bar and footer on the adelle theme, however when I tried to do this the flag edges disappeared on the top nav bar and the flag edges remained black on the footer bar. Please see my blog: http://www.lilyluxe.com.

    I don’t really mind if the flag edges disappear, but I do need to remove them on the bottom footer also as it looks terrible.

    Can anyone help?

    Many thanks in advance :-)

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

  • eurello · Staff ·

    Hi there,

    You can do this with:

    .navigation-main {
color: #fff;
}

    That changes the main part of the header. Then: 

    .navigation-main:before, .navigation-main:after {
border: none;
}

    That gets rid of the flags.

    Similarly for the footer: 

    .site-footer {
background: #fff;
}

.site-footer:before, .site-footer:after {
border: none;
}

    Note that the color code I’ve used there is white for an example, but you’d of course replace that with whatever color you prefer.

  • Unknown's avatar
    washinjc · Member ·

    Hi eurello, are you saying I just add the color tag in under the nav main section or replace the code entirely?

    I’m trying to make my nav bar white (no flags) and have it look transparent with just the menu words – I don’t want it to look so apparent that it’s in a menu box.

    Sorry I’m not that well versed in CSS the blog I need help with is lovecrownjewell.com

    Thanks!

  • Unknown's avatar
    auxclass · Member ·

    @eurello –

    http://lilyluxe.com/ – is a WordPress.ORG install and is not hosted here. Normally they get support at WordPress.ORG

    That changes things quite a bit –

    PS – CSS is last scanned rules if that helps

  • eurello · Staff ·

    Yes, apologies for the confusion. I prompted @gilliancut to get support in the .org Adelle forum in a separate thread, but then went ahead and answered the questions she’d already posted.

    @washinjc, you can make the menu bar white with this CSS: 

    .navigation-main, .navigation-main ul ul, .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on {
	background: #fff;
}

    That makes your fonts vanish, though, since they’re white right now, so you’d also have to change their color: 

    .navigation-main, .navigation-main a {
	color: #000;
}

    That makes them black, but you can replace the color codes with whatever.

    How does that work?

  • Unknown's avatar
    washinjc · Member ·

    yes thank you so much! It works on the desktop version perfectly but I noticed it doesn’t take the CSS change on my mobile version even tho I tell it to in the customize section – it’s still showing my ”menu” title and background as white…maybe it takes a while to refresh?

  • Unknown's avatar
    washinjc · Member ·

    actually I noticed that it would only change it on the mobile when I updated the color outside of the actual style sheet.

    i also removed the date on the desktop version but it still shows on the mobile version — any solutions on how to perhaps keep the date near the post title but remove that date circle altogether?

  • eurello · Staff ·

    Hi there,

    It works on the desktop version perfectly but I noticed it doesn’t take the CSS change on my mobile version even tho I tell it to in the customize section – it’s still showing my ”menu” title and background as white…maybe it takes a while to refresh?

    This is for a couple of reasons. For one you currently have the CSS for your menu bar wrapped in the following media query: 

    @media screen and (min-width: 63.750em) {
}

    That’s keeping your changes from appearing on smaller screens, like an iPad. Try removing that — remember to move the closing bracket at the very bottom of all that CSS, as well. Each opening bracket needs a closing bracket. :)

    Then, on a mobile phone, the menu becomes a toggle, so you have to use CSS for that specifically. This should work: 

    .navigation-main, .navigation-main ul ul, .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on {
		background: #F781F3;
	}

    i also removed the date on the desktop version but it still shows on the mobile version

    If you want to hide it altogether, just use: 

    .post-date {
	display: none;
}

    That will get rid of it on all screen sizes.

    If you want to remove the background and scoot it closer to the title, use:

    .post-date {
background: none;
padding-right: 0px;
}

    How does that work?

  • Unknown's avatar
    designsimply · Member ·

    I checked http://lilyluxe.com/ and I found that the following CSS removes the background from behind the main menu currently on that page.

    .nav,
.nav:before,
.nav:after {
	background: none;
	border: none;
}

    To get further help with the Adelle theme setup in a WordPress.org setup, please go to https://wordpress.org/support/theme/adelle

  • The topic ‘How to change nav bar and footer colour in Adelle Theme’ is closed to new replies.