Modifying JA-Alumni

zmand13

Hi,

I would like to modify the JA-Alumni template but I am not quite sure how to do that. Could you please clarify me the following points:
1. How can I change menu items font color for both menu bars, main navigation and top navigation?
2. I've noticed that both menu bars are located at the position Off-canvas. How can I control the position of the Off-canvas on the page? How can I control the position of the menu? For example can I move the main navigation menu to the right?
3. I understand that the Secondary color of the Theme could be changed easily with the Thememagic. But could I (a) just leave this color out? I mean let the background color affect the overall appearance; (b) could I choose its transparancy? The present situation is that the Secondary color masks and blurs the image in the Slideshow beneath; (c) Could I choose different colors for the main navigation and for the rest of the slideshow image?
4. I will probably use smaller image sizes for Slideshow from those you recommended on the demo website. But in that case the the size and the position of the Title and the Description of the Slideshow becomes inappropriate. How can I change them? I know I can create custom.css but I am not sure what to put inside.

Best,
Zoran

pavit

Hi zmand13

Everything you are asking in 4 points can be accomplished using less files and custom.css file

My suggestion is to open a new topic for each single point and we will help you to make needed changes on your website.

How can I change menu items font color for both menu bars, main navigation and top navigation?

You have megamenu.less in this folder /templates/ja_alumni/less/

This file manages color assigned to megamenu and topbar menu

example:

  .mega-nav > li.active > a,
  .dropdown-menu .mega-nav > li.active > a {
    color: @brand-primary;
  }

color: @brand-primary; is defined in ths file /templates/ja_alumni/less/variables.less

@brand-primary: #a22631;

So after you applied needed changes to the 2 files to choose your color for specific menu behaviour you should compile less to css from template manager to have it moved in css files.

You can apply all needed changes in file custom.css, this file should be created in this folder /templates/ja_alumni/css/
and such file will be not overwritten by templates updates,

Hope it helps.

Regards

zmand13

Thank you very much Pavit for your response! I prefer to create custom.css file which I did in the designated folder.

But, maybe we did not understand each other. I understand that primary color (brand-primary) is the color of the top block of the website i.e. the color of the top menu bar. We can easily change this color from ThemeMagic, can't we?

However, I need control of the color of Menu fonts. Presently, font color is white on all styles and I could not figure it out how to change it.

Best,

Zoran

pavit

Hi zmand13

I need control of the color of Menu fonts.

add to your custom.css

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > span {
color:#yourhexcode!important;
}

.navbar-default .navbar-nav > .active > span, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > span:hover, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > span:focus, .navbar-default .navbar-nav > .active > a:focus {
color:#yourhexcolorcode!important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > span,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > span:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > span:focus {
  color: #yourhexcodecolor!important;
}

For the hover